Best way to have global css in Vuejs

Question

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)

Ectoplasm

Thanks @mods for not closing this as opionion-based. It's actually helping me a lot. – Sickness

Answer 1

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';

Bastard

Thank you! I'm using webpack so in my main.js file I did require('./assets/css/main.css'); and it works now. – Ectoplasm

@Ectoplasm I guess the best approach would be using the sass-loader to get it done. Takes just a few words to get it done. Here's the explained solution- https://mcmap.net/q/196644/-vue-js-always-load-a-settings-scss-file-in-every-vue-style-section – Scofflaw

@Ectoplasm there is no need for require, when it can be done with import './assets/css/main.css'). – Pathogenic

An example would be nice for people – Windpipe

DO NOT USE your index file if you plan on utilizing history mode. It will cause major issues on refresh. Always webpack! – Hinder

Warning : Good solution. It run. But if you want a dynamic system you can't do this into response promise for example. – Effectually

Answer 2

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')

Prolonge

Do you know if this approach has the same effect as adding it to the App.vue ? as the above answer from @c24b? – Brunabrunch

Sorry, I haven't tested whether it has got the same effect or not. But, I prefer to separate my files (if they make a sense). – Prolonge

Answer 3

In App.vue you can add a style property to declare you CSS file:

<style>
  @import './assets/css/global.css';
</style>

Degraw

Do you know if this approach has the same effect as adding it to the main.js ? as the answer from @Coder Absolute meaning can you add more imports here as well ? – Brunabrunch

This has not the exact same effect as in main.js the import are executed at one following the order of the declaration of the import and not the order of the execution of the template. – Degraw

Answer 4

1. create a new css file in your assets folder for example : global.css
2. import "global.css" to main.js

import '@/assets/global.css';

Riddle

Please show inside of the main.css – Kielty

Answer 5

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.

Tolerate

Be careful PeeJee, the solution your are proposing is just recommended for share scss variables across the entire application components. Further information here: https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/ "You have to make sure that the files that you import in the data configuration contain only SASS code that doesn't get rendered, such as variables, mixins and functions. Otherwise, that code will end up repeated for each component in... – Oversew

... the final post-processed css file" – XaviPS [Converted to comment from answer, but it didn't fit] – Mucoviscidosis

Thank you for the information @XaviPS, didn't know that! – Tolerate

Answer 6

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

Dyadic

Answer 7

Sass has recently announced their new module system which needs to be used by @use and @forward.

My approach is the best way to use scss with Vite. Use defineConfig to setup global scss (colors, mixin) and reuse in all components without import

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/main.scss" as *;`,
      },
    },
  },

Here: Sandbox

Note: If you see the same CSS is being loaded multiple times.

When you use @use "~/styles/main.scss" as *; equivalent import all styles to your file.

So, inside styles folder must be stored variables, mixins and must use partial Sass files

If you want to style for common or reset, it must be put into src/index.scss

// Put in common css or reset css here.
:root {
  --danger: #fe2c55;
  --danger-dark: #d60032;
  --danger-light: #ff5c83;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Royceroyd

I am learning Vue and I have implemented this method. When I am on a dev server, I can see the same css is being loaded multiple times. Is that only happening whilst on a dev server? I haven't yet tested a production version of my code yet. – Grossularite

Sure, When you use @use "~/styles/main.scss" as *; equivalent import all scss to your file. So, inside styles folder must be stored variables of scss If you want to style for common or reset, it must be put into src/index.scss ``` // Put in common css or reset css here. :root { --danger: #fe2c55; --danger-dark: #d60032; --danger-light: #ff5c83; } * { margin: 0; padding: 0; box-sizing: border-box; } ``` – Royceroyd

Answer 8

1. create a vue.config.js file in your root directory
2. Create a styles folder inside your src folder and you can create your global style file here for example base.scss
3. to use scss install two dependencies

npm install node-loader sass-loader

4. Inside your vue.config.js paste code from below

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            additionalData: `@import "@/styles/base.scss";`
        }
      }
    }
  };

Thornhill

I am learning Vue and I have implemented this method. When I am on a dev server, I can see the same css is being loaded multiple times. Is that only happening whilst on a dev server? I haven't yet tested a production version of my code yet. – Grossularite

Answer 9

Add css within the <link> element, inside the <head> section of an HTML page.

<!DOCTYPE html>

<html lang="en">
  
  <head>
    <link rel="stylesheet" href="./src/assets/styles.css">
    /* ... */
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

</html>

Admix