What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)
import a css file in the index.html
do @import in main component
put all the css in the main component (but that would be a huge file)
Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.
As comments below suggested if using webpack adding this to main.js works:
import './assets/css/main.css';
I found the best way is to create a new file in the assets folder, I created as global.css
but you can name anything of your choice. Then, import this file global.css
file in the main.js
.
Note: Using this approach you can also create multiple files if you think the global.css is getting really large then simply import all those files in the main.js.
@\assets\global.css
/* move the buttons to the right */
.buttons-align-right {
justify-content: flex-end;
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './routes'
Vue.config.productionTip = false
// Importing the global css file
import "@/assets/global.css"
new Vue({
router,
render: h => h(App)
}).$mount('#app')
App.vue
? as the above answer from @c24b?
In App.vue you can add a style
property to declare you CSS file:
<style>
@import './assets/css/global.css';
</style>
main.js
? as the answer from @Coder Absolute meaning can you add more imports here as well ?
You can also do something like this: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
My folders are mostly structured like this:
- src
- assets
- _global.scss
- _colors.scss
- _fonts.scss
- _paragraphs
- index.scss // <-- import all other scss files.
This also works with normal css.
There are to two ways, as I know, to achieve this.
Approach 1
Utilize vue.config.js
configuration, less config can also be replaced with sass:
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `@import '@/style/common.less';`
}
}
}
}
Approach 2
In your .vue file, make your style looks like this:
<style lang="less">
@import (reference) "../../style/variables.less";
#app {
background: @bgColor;
}
</style>
Note: the (reference)
flag is used to make variables defined in variables.less
take effect. If you don't have variables, @import "../../style/variables.less";
is sufficient to do the trick.
For your reference, you can also take a look at this link:
https://github.com/tjcchen/vue-practice/tree/master/multipage-app
create a new css file in your assets folder for example : global.css import "global.css" to main.js
import '@/assets/main.css';
create a vue.config.js file in your root directory Create a styles folder inside your src folder and you can create your global style file here for example base.scss to use scss install two dependencies
npm install node-loader sass-loader
Inside your vue.config.js paste code from below
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/styles/base.scss";`
}
}
}
};
Success story sharing
require('./assets/css/main.css');
and it works now.require
, when it can be done withimport './assets/css/main.css')
.