CODEWITHSUNDEEP
laravelsassvuejs2laravel-mix
Smiter
Smiter

Reputation: 1197

With laravel mix in a laravel vue project how can I include scss files across all components?

I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:

let mix = require('laravel-mix');

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

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.

Any advice is appreciated, thanks.

Upvotes: 4

Views: 2235

Answers (1)

Filipa Simão
Filipa Simão

Reputation: 106

Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.

It will only work with extractVueStyles active:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
     extractVueStyles: true,
     globalVueStyles: 'resources/sass/_variables.scss',
   })
   .version();

Upvotes: 3

Related Questions