I have built an app with vuetify and vue cli, there is nothing wrong when I am in dev. But after I run npm run build, there seems to be a new default #app CSS generated and overwrite my CSS in the final bundled file. In my case, all the text alignment and margin on my website went crazy. The dev mode works fine but it appears only in the prod.
CSS in the console
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import store from './store'
export default {
store,
name: 'App',
metaInfo: {
title: '',
titleTemplate:
},
created: function () {
}
}
</script>
<style >
#app {
text-align: unset;
margin-top: 0px;
}
</style>
Solved. I did not use scoped style in one of the deprecated components and it affects the whole app. What's strange is it didn't show up in development
Related
I would like to add in a non-vue application a custom element.
For that, I've created a classical SFC :
//test.ce.vue
<template>
<div class="text-primary">Test</div>
</template>
<script>
export default {
name: 'test',
};
</script>
<style>
.text-primary {
color: red;
}
</style>
And then a main script :
//app.js
import Test from 'test.ce.vue';
const testElement = defineCustomElement(Test);
customElements.define('test-element', testElement);
document.body.appendChild(document.createElement('test-element'));
Everything is running normally with the creation of a shadow dom element :
<test-component>
#shadow-root (open)
<style>
.text-primary {
color: red;
}
</style>
<div class="text-primary">Test</div>
</test-component>
I would like to avoid to redefine .text-primary class in the component as this class is already defined in the main css file. I also don't need to define specific classes for this component only, so in other terms, I would like to remove the shadow dom like a classical custom element will do.
So basically, render this :
<test-component>
<div class="text-primary">Test</div>
</test-component>
Is there's any option to define in vue that permit that ?
Older question, but in case someone still needs a solution for this...
there is currently no way to tell Vue not to use the shadow-dom. In Vue 2 there was a official package for creating web-components without shadow-root. And there is a community port for Vue 3 of that:
https://www.npmjs.com/package/vue3-webcomponent-wrapper
It was only meant to help people who have just migrated from Vue 2 to keep there application working. It was never intended to replace the official solution and should only be used until the official package can handle Vue 3.
Unfortunately that never happend.
The community port still works, but the package does not contain any source code, so it is a bit scary to use.
I came up with another solution for our project. Using defineCustomElement on a more complex vue component wich is composed by a bunch of nested components reveals another problem. The css of the child components wont be copied to shadow root. So only the css of the root component will work.
You can find the related issue and a workaround with full example here:
https://github.com/vuejs/core/issues/4662#issuecomment-1116001438
It basically grabs the css from the head and appends it to the shadow root.
You just have to extend it to also copy your main.css, like
<template>
<div id="app" ref="injectionElementRef">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld
},
mounted() {
const el = this.$refs.injectionElementRef as HTMLElement
const root = el.getRootNode()
const linkTag = document.getElementById('main-css-id')
root.insertBefore(linkTag.cloneNode(), el)
}
});
</script>
The downside of this method is, there is a short flicker because the css is applied after mount. You could show an empty element till css is applied to work around that.
You are using Vue as a Tool to create Web Components, but why use a Tool over Native Technology?
Tools are not better; Tools are only faster in performing a task.
And in your case the Tool does something you do not want it to do.
Using native Web Components Technology, all you need is:
<style>
.text-primary {
color: red;
}
</style>
<test-component></test-component>
<script>
customElements.define("test-component", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<div class="text-primary">Test</div>`;
}
})
</script>
I am using jsx to define styles for the NextJs components and i need to define a background image for some elements.
The only paths that seems to accept is the relative path, to the current page, or absolute path.
But how to pass a relative path to the component itself?
Here a simple component function for testing:
import React from 'react'
const TestComponent = (props) => {
return (
<div>
<h1 className="test">See my background</h1>
<style jsx>{`
.test {
background-image: url("someImageFile.jpg");
}
`}</style>
</div>
)
}
export default TestComponent
This will return the 404 error for url "localhost:3000/current page/someImageFile.jpg"
For a NextJS application, you should have a public folder at the root of the directory of your app where you store all the static files: such as images.
Here is a link to the official documentation where they explain it very clearly:
https://nextjs.org/docs/basic-features/static-file-serving
The trick is to use $ to be able to call require function:
<style jsx>{`
.test{
background-image: url(${require("./someImageFile.jpg")});
}
`}</style>
Reference documentation here.
I'm trying to build an electron app (my first) on Windows 10 (using Visual Studio Code and Git Bash as tools), and for some reason my app has simply stopped updating based on css changes. In particular, I have a search box which I had been playing around with using different bootstrap form input styling. However, when I decided to take all of that away and just put in a vanilla html form, I still get the fancy bootstrap input.
I can successfully change the html by adding more text that shows up in the app, but as long as I have a text input element, I end up with the fancy styled bootstrap input. I tried deleting the electron cache for my app, and I then tried deleting the entire ~/AppData/Roaming/myapp directory, neither of which helped. I then tried creating a new app entirely in a new folder, reran "npm install --save electron", copied in my html and js files (but not any other files), and tried again... and I still get the bootstrap styled form! I have looked at solutions like the one described here (Electron not using updated css file) but without any noticeable difference. I am at a total loss of what to do and can only imagine that either electron is hiding another cache somewhere or that somehow Visual Studio Code or Git Bash are hiding caches somewhere that are screwing me over.
Here are the only 3 files in my project:
package.json:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"devDependencies": {
"electron": "^6.0.10"
}
}
main.js:
const electron = require('electron');
const path = require('path');
const url = require('url');
// SET ENV
process.env.NODE_ENV = 'development';
const {app, BrowserWindow, Menu} = electron;
let mainWindow;
// Listen for app to be ready
app.on('ready', function(){
// Create new window
mainWindow = new BrowserWindow({});
mainWindowURL = url.format({
pathname: path.join(__dirname, 'mainWindow.html'),
protocol: 'file:',
slashes:true
});
mainWindow.webContents.session.clearCache(function(){})
mainWindow.loadURL(mainWindowURL, {"extraHeaders":"pragma: no-cache\n"})
// Quit app when closed
mainWindow.on('closed', function(){
app.quit();
});
// Build menu from template
const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
// Insert menu
Menu.setApplicationMenu(mainMenu);
// Clear cache from any previous sessions
//mainWindow.webContents.session.clearStorageData();
//win.once('ready-to-show', ()=>{win.show()})
//const win = BrowserWindow.getAllWindows()[0];
//const ses = win.webContents.session;
//ses.clearCache(() => {});
});
// Add developer tools option if in dev
if(process.env.NODE_ENV !== 'production'){
mainMenuTemplate.push({
label: 'Developer Tools',
submenu:[
{
role: 'reload'
},
{
label: 'Toggle DevTools',
accelerator:process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
click(item, focusedWindow){
focusedWindow.toggleDevTools();
}
}
]
});
}
mainWindow.html:
<!DOCTYPE html>
<html>
<head>
<title>Miobium</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">-->
<!--<link rel="script" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">-->
<style>
.fullPageContainer{
}
#left_panel {
background-color: white;
height: 100vh;
float: left;
width: 20vw;
border-right: 1px solid grey;
}
#main_panel{
background-color: white;
height: 100vh;
float: right;
width: calc(78vw - 2px);
}
input[type=text]{
width: 80%;
border: 1px solid grey;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="fullPageContainer">
<div id="left_panel">
Tags
</div>
<div id="main_panel">
Search
<form>
<input type='text'>
</form>
</div>
</div>
<script>
const electron = require('electron');
const {ipcRenderer} = electron;
</script>
</body>
</html>
I would greatly appreciate any insight you guys may have! I am a novice with electron and am hoping there is something simple that I can do to fix this problem. Thanks!
It appears I have been suffering from an unbelievable coincidence, but I have now resolved the issue.
Prior to when I started having the problem, I had been trying bootstrap search bar styles. The very last bootstrap style I tried was one which was EXACTLY the same as the material.css text input style, and I had even changed the bootstrap style all on my own to have exactly the same 'active' color as material.css uses by default.
When I took away the bootstrap to try styling on my own, nothing happened... The input stayed exactly the same. I assumed that this obviously meant that there was a cache somewhere. However, it turned out that material.css just had exactly the same style I had created with bootstrap, and material.css doesn't require you to add any special class labels to elements before styling them so I never suspected. Removing material.css immediately fixed the problem.
Definitely the weirdest bug coincidence I have ever experienced by orders of magnitude.
I am not able to load style sheet in my react app:
.App {
text-align: center;
}
.App p {
color: blue;
}
I am trying to print file on console then this is empty.
If you are starting the project from scratch using React, you will probably need to learn how to use the bundling tools such as
Webpack
Rollup
Parcel
They will give you the ability to use tools like css-loader which will allow you to import your css file into your react component in the header in this way:
import 'app.css'
Alternatively, you can just use react 'style' attribute directly on the component:
const style = {
app: {
textAlign: 'center'
},
p: {
color: 'blue'
}
};
And you can apply the style in this way:
<App style={style.app}>
<p style={style.p}>Hello world!</p>
</App>
For more information of using style, you can check the React official docs here: https://reactjs.org/docs/dom-elements.html#style
I'm currently working with rails and reactjs. I'm having difficulties using css in my reactjs files. It seems like every time i try to use it, no change is being applied at all. In my App.jsx file I have this:
import React from "react";
import styles from "./styles.css";
export default class Register extends React.Component {
render() {
return (
<div className={styles.container}>
<h1> this text should appear to the right </h1>
</div>
);
}
}
And in my styles.css file I have this:
.container {
width:40%;
text-align:right;
}
For the record I am using webpack. Can anyone help me understand why the css isn't having any effect on my jsx components. I've looked all over for help but was unable to put the pieces together.
If it matters, this is how my "config/webpack/development.js" file looks like:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
It depends on the webpack loader settings. If you are using css-loader as configured in react-scripts (as of 1.1.5), then the classNames are loaded using {modules: false} option, i.e. global styles, which can be referenced as strings in JSX code:
import "./styles.css";
... className="container" ...
Or you can load local styles using following CSS-file syntax:
:local .container {...
Or edit your webpack.config.js appropriately (see https://github.com/webpack-contrib/css-loader#scope for the official documentation of various options).
seems like you didn't enable an option { modules: true } for css-loader in webpack config
take a look
webpack-contrib/sass-loader#206
https://github.com/webpack-contrib/css-loader#options
Taken from: https://github.com/facebook/create-react-app/issues/1350