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 si

Answer 1

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.