CODEWITHSUNDEEP
cssimportvue.js
Jordy
Jordy

Reputation: 4809

Best way to have global css in Vuejs

What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)

Upvotes: 109

Views: 119507

Answers (9)

Omar Izem
Omar Izem

Reputation: 51

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

Upvotes: 5

hungify
hungify

Reputation: 387

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

Upvotes: 2

Dmitry Kurowsky
Dmitry Kurowsky

Reputation: 340

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>

Upvotes: 0

MD SHAYON
MD SHAYON

Reputation: 8051

  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
  1. Inside your vue.config.js paste code from below
module.exports = {
    css: {
      loaderOptions: {
        sass: {
            additionalData: `@import "@/styles/base.scss";`
        }
      }
    }
  };

Upvotes: 0

user3932156
user3932156

Reputation: 31

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

Upvotes: 3

highFlyingSmurfs
highFlyingSmurfs

Reputation: 3039

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

Upvotes: 153

c24b
c24b

Reputation: 5552

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

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

Upvotes: 16

PeeJee
PeeJee

Reputation: 696

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.

Upvotes: 4

Coder Absolute
Coder Absolute

Reputation: 6327

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

Upvotes: 43

Related Questions