vue.config.js to (laravel) webpack.mix.js

Question

I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules

I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).

vue.config.js:

module.exports = {
    // So we can use the template syntages in vue components (correct me if am wrong)
    runtimeCompiler: true,
    // CSS settings
    css: {
        loaderOptions: {
            sass: {
                // Load in global SASS file that we can use in any vue component and any sass file
                data: `
                  @import "@/assets/css/variables.scss";
                `
            }
        }
    }
};

Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.

Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.

Anyone experience with this?

Couldn't you just use the .env file: laravel.com/docs/5.8/mix#environment-variables ? — online Thomas
– online Thomas, Commented May 7, 2019 at 9:23

Pedro Sanção · Accepted Answer · 2020-06-08 11:36:22Z

2

Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.

mix.options({
    globalVueStyles: `resources/assets/css/variables.scss`
});

And install the dependency sass-resources-loader

npm install --save-dev sass-resources-loader

It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.

To have more control over "vue-loader" you can use the undocumented function mix.override

mix.override(webpackConfig => {
    // iterate and modify webpackConfig.module.rules array
})

edited Jun 8, 2020 at 11:36

answered Jun 7, 2020 at 19:50

Pedro Sanção

1,3981 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niels Lucas Over a year ago

I would love to try this solution for my self. But I am now using c# (etc.). and I dont have the tools anymore (sure you can use laravel/vue in windows, but its different) to try this at home. Any people that wanna upvote/try this as well and confirm this is working?

Collectives™ on Stack Overflow

vue.config.js to (laravel) webpack.mix.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related