How do I add a global scss file in Vue.JS that will compile?

Question

I am trying to import a scss file within my VueJS project, where it will then compile and thus be able to use with my project. However, I need some help, as at present it simply errors. Is there a way to do this? Please note, I am very new to VueJS so I'm just getting my head around the basics.

I created a folder called scss within my src folder, which contains my main.scss file. Next in my Vue.JS I have the following code;

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/main.scss";
        `
      }
    }
  }
};

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

Answer 1

to make it simple just use this trick

1. create a file called vue.config.js (if it was not auto-created by vue-cli when you were creating your project)
2. add these code to your created file

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            prependData: `
            @import "@/assets/scss/main.scss";
            `
        }
      }
    }
  };

3. the @ means src dir this means that @/assets is the same as src/assets
4. I assume that you have the main.scss file, where you include all of you sub scss files if you want to know how it is made, take a look here it is really cool to work with it
5. prependData may not work or throw an error the reason why I used these is because I am using "sass-loader": "^8.0.2" . here are some useful information

• on "sass-loader": "^7.*.*" try to use data
• on "sass-loader": "^8.0.2" try to use prependData
• on "sass-loader": "^9.0.0" try to use additionalData

6. after that stop server and run it again to load new configurations we made in vue.config.js
7. if you are working with vuetify it may throw an error, so make sure that you match the processor name with the extension, like if you have .scss files you will need to use these configs

        scss: { //the change was made here (match the option name with file extension)
            prependData: `
            @import "@/assets/scss/main.scss";
            `
        }

if you are using .sass file use these configs

        sass: { //the change was made here (match the option name with file extension)
            prependData: `
            @import "@/assets/scss/main.sass";
            `
        }

Answer 2

UPDATE FOR SASS-LOADER ^9.0.0

I am using below Vue.config.js file configuration with sass-loader 9.0.2. And all is working fine.

NOTE: additionalData is used instead of data or prependData on the latest versions of SASS-LOADER.

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

Answer 3

I updated the style tag to include the import statement and it works.

@import 'scss/main.scss';

#app {
    display:block;
}
</style>

Answer 4

It depends on what you used for creating a Vue project but when you're using the Vue CLI 3 tool you can set this up in your vue.config.js file located in your root. This file is for config of your Vue project and is used a lot to overwrite your webpack config (that isn't there unless you eject).

npm install -D sass-loader node-sass

After that, you can add this to your vue.config.js file

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "./src/main.scss";
                `,
            },
        },
    },
}

And then you can import all your scss files in your main.scss . This way you can also use variables in your components. Personally I would not recommend to have separate stylesheets. If your project scales you will probably delete components and then end up with styles you don't use anymore. If you write your scss in the components itself you will also delete styles when you delete your component. I would go for only some global styles in a separate file and a file for your variables. Hope this helps.

Answer 5

The recommended solution is okay, but has some issues regarding the css file being called twice through the vue.config.js.

The best method is to call your mixins or variables in the vue.config.js

scss: { // the change was made here (match the option name with file extension)
  additionalData: `
    @import "@/scss/variables.scss";
  `
}

Then inside your main.ts or app.vue file import the scss file.

import '@/main.scss';

Answer 6

There is some solutions to this situation.

1. import your global css to index.html.
2. import your css file to current component.
3. assume you are using server side rendering with nuxt then you can put your css on nuxt.config.js file.
4. you can use webpack

Answer 7

Update For SASS-LOADER ^11.0.1

For vue.config.js and if you're using node-sass , you need to add the following config:

module.exports = {
  ...

  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/assets/styles/file.scss";',
        implementation: require('node-sass')
      },
    },
  },

  ...
};