I'm trying to override the background color on the input box from element-ui
but never worked
<template>
<el-input v-model="form.text" type="text" clearable></el-input>
</template
<style lang="stylus" scoped>
.el-input__inner
background-color #f4f4f4
</style>
base on the information I gathered from google
chrome dev tool snapshot
First option:
Try to override
.el-input__inner {
background-color: #f4f4f4 !important;
}
Second option:
Create a seperate css file which is loaded in after the element-ui does.
Open element.js in the plugins folder.
Add import your styles after element-plus, like this:
import ElementPlus from "element-plus";
import "../element-variables.scss";
import "../assets/styles/global.scss"; // our custom styles
export default (app) => {
app.use(ElementPlus);
};
Related
I'm using vite-plugin-ssr + vue-router and I want to implement critical styling.
My project has a pages folder which has the following structure:
pages/SomePage/index.vue
<template>
<div class="TestPage">
TestPage Content
</div>
</template>
<script>
export default {
name: "TestPage"
}
</script>
<style lang="css" src="./critical.css"/>
pages/SomePage/critical.css
.TestPage {
background: red;
}
I want the styles from the critical.css file to go into the <head/> tag as internal ~ <style> .SomePage {background: blue;} </style> for each route.
I tried to get inspired by the rollup-plugin-critical idea, but my knowledge is apparently not enough, because a positive result could not be achieved.
How can this be implemented?
I have a lot of SVGs in my site and they have lots of paths so I don't want to clutter my code with them, but display the full code in the browser.
In PHP there's a magic function called file_get_contents('path')
Is there an alternative to this in Nuxt? So far the only option is to serve it as a regular img tag which prohibits all styling.
Check out the #nuxtjs/svg module (NPM). Using that module you can import your svgs in your script and use them like components in your template.
<template>
<NuxtLogo class="logo" />
</template>
<script>
import NuxtLogo from "~/assets/nuxt.svg?inline";
export default {
components: { NuxtLogo },
};
</script>
<style scoped>
.logo {
fill: #fff;
}
</style>
I'm trying to build a simple mail editor in vue (and vuex). Once everything is edited out of some input, i'd like to inline some scss files into the resulting html, using juice.
If i try to import one css using webpack raw-loader,
import css from '!raw-loader!./../assets/sass/test.css';
then i can pass the css value to juice
let result=juice.inlineContent(html,css)
and then injecting with v-html (see below) in one of my component to render the email.
Whitout using the raw-loader, the css will be applied to everything, beeing imported.
If i try to use the raw-loader with a scss file, it's not compiled - rightly - properly.
import css from '!raw-loader!./../assets/sass/main.scss';
I'm quite new to vue and webpack, so, is there something/somewhere i can dig in to understand a way to preprocess a scss file and then pass it as a string to vue, without applying it as style in vue?
I've also tried to scope some css to a component in which i use a v-html tag (and where the inlined html should go)
<template>
<div v-html="render" />
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["render"]),
},
};
</script>
<style lang="scss" scoped>
table {
border: 1px solid red;
}
</style>
At first in the value (the getters) ther's no table, but when i add it to the component (with the editor) the style it's not rendered at all, as if the component is not re-rendered. That's the reason i decided to inline the css before injecting in the DOM, instead of doing it after some action - like a click on a button.
I've also tried using >>> but with no luck. I know this is not the main question, just a "side quest", but i'm just learning
import css from '!raw-loader!sass-loader!./../assets/sass/main.scss';
It first compile the sass and then import it as a row string... easy peasy
I'm using CSS Modules with Nuxt and have run into some issues when trying to import a stylesheet in my js. If I import my stylesheet directly into the...
<style module>
#import './index.css';
</style>
...everything works as expected. In my particular case I need to run a computed property to choose between two different stylesheets so instead of importing through the <style module> I need to import into <script> and implement the styles like so:
<script>
import foo from './index.css'
export default {
computed: {
styles() {
return foo
}
}
}
</script>
When implementing this on vue everything works great and I get a style object returned. Nuxt however is returning an empty object and none of my styles render correctly.
I'm activating CSS-Modules in my nuxt.config.js file like this:
export default {
...
loaders: {
css: {
modules: true
}
}
...
}
Is this an issue with Nuxt SSR? I've been looking for the root cause/solution but haven't had much luck in my search.
Update
After taking ivandata's advice and adding to my build script this code:
export default {
....
build: {
extend (config, ctx) {
const cssLoader = config.module.rules.find(rule => {
return rule.test.toString() === '/\\.css$/i';
});
delete cssLoader.oneOf[0].resourceQuery;
...
}
}
}
CSS modules appear to be working but a new problem popped up which is that now the project doesn't understand any vue-component styles that are not css-modules. After doing a bit of research I found out that the resourceQuery is telling the loader what type of file to apply the loader options to.
I've tried digging through the style loader on vue.cli 3 and comparing the differences to Nuxt. I removed ivandata's snippit and I tried matching the loaders of vue and nuxt but the problem still persisted.
Here is what is happening visually when between enabling and disabling ivandata's code:
Disabled
Enabled
And here is a code snippet of what is going on in my project:
<template>
<section :class="style.container">
<h1>hey</h1>
<h2 class="test">hey</h2>
</section>
</template>
<script>
import style from './index.css'
export default {
computed: {
style() {
return style
}
}
}
</script>
<style>
h1 {
font-size: 100px;
}
.test {
font-size: 100px;
}
</style>
So as you can see if I have the resourceQuery in the css-loader my javascript import's of css do not work but all vue-component styles worked as normal. Once I remove the resourceQuery the js imported stylesheet works but the vue-template style classes no longer work. I don't think the solution lies in removing resourceQuery and I'm curious if this has something to do with another loader entirely. I've dug quite a bit through the vue.cli 3 loaders and can't see anything that distinctly sticks out to me.
Ok this another way. Leave your old code. Remove my code and add ?module to import file path:
<script>
import foo from './index.css?module'
export default {
computed: {
styles() {
return foo
}
}
}
</script>
I was wrong. resourceQuery option is used to test against the query section of a request string.
You don't need activate css-modules in nuxt, they active by default.
Nuxt.js use vue-style-loader for load styles.
https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage
By default, all styles loading from style tag with module attribute, because style loader use resourceQuery /module/ in oneOf rule. So if remove this property nuxt will load styles as you want.
export default {
....
build: {
extend (config, ctx) {
const cssLoader = config.module.rules.find(rule => {
return rule.test.toString() === '/\\.css$/i';
});
delete cssLoader.oneOf[0].resourceQuery;
...
}
}
}
nuxt version: 2.0.0.
You need to do nothing but exchange scoped to module,such as:
<template>
<div :class="$style.red">TEST</div>
</template>
<style module>
.red{color:red;}
</style>
What function does the name: 'app' have in the following Vue.js CLI code?
I understand that the export default is used for
"creating JavaScript modules to export functions, objects, or
primitive values from the module so they can be used by other programs
with the import statement" (docs)
and I understand the module to be what is in the template element, but I don't see where it is being imported.
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Nor do I see what name: 'app' does exactly since if I change the name, the Vue.js. code still works, until when you change this in non-CLI Vue.js, e.g.
new Vue({
el: '#app',
...
});
If you change the '#app' then the code won't reference the element and it won't work anymore.
The name Attribute of a Vue component is not really required in projects generated with the vue cli webpack template. In your case, the component name is set elsewhere (since you use vue-router: in src/router/index.js), hence it is not technically required in the export default of the *.vue file.
If you generated your vue cli webpack template without vue-router you wouldn't have to supply the component name either, because your <script> block would look like this:
<script>
import Hello from './components/Hello'
export default {
...
components: {
Hello
}
}
</script>
The components: {Hello} is a shorthand for components: {'Hello': Hello} in EcmaScript 6. This is where the component name would be set in this case.
That being said, setting the component name in the export default object of your *.vue file is considered good style, because your components will be named consistently across the project and thus be easier to debug. If you changed the import Hello from .... to something like import HelloComponent from .... it would show up as HelloComponent in things like vue-devtools and warning messages. You would also now have to reference it as <hello-component></hello-component> in your <template>. Since you want your component names to be consistent, especially when writing components that you intend to be reusable, you should set the name property in your vue component once and for all.