globalVueStyles doesn't work

• Laravel Mix Version: #.#.# (npm list --depth=0) ── axios@0.21.1 ├── bootstrap@4.6.0 ├── css-loader@5.1.2 ├── jquery@3.6.0 ├── laravel-mix@6.0.13 ├── lodash@4.17.21 ├── node-sass@5.0.0 ├── popper.js@1.16.1 ├── postcss@8.2.8 ├── resolve-url-loader@2.3.2 ├── sass@1.32.8 ├── sass-loader@11.0.1 ├── vue@2.6.12 ├── vue-loader@15.9.6 ├── vue-style-loader@4.1.3 └── vue-template-compiler@2.6.12

• Node Version (node -v):

• v13.12.0

• NPM Version (npm -v):

• 6.14.8

• OS: MacOS Big Sur version 11.2.1

Description:

globalVueStyles is not working

webpack.mix.js: const mix = require(‘laravel-mix’); var path = require(‘path’);

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

package.json: { “private”: true, “scripts”: { “dev”: “npm run development”, “development”: “mix”, “watch”: “mix watch”, “watch-poll”: “mix watch – --watch-options-poll=1000”, “hot”: “mix watch --hot”, “prod”: “npm run production”, “production”: “mix --production” }, “devDependencies”: { “axios”: “^0.21”, “bootstrap”: “^4.0.0”, “css-loader”: “^5.1.2”, “jquery”: “^3.2”, “laravel-mix”: “^6.0.6”, “lodash”: “^4.17.19”, “node-sass”: “^5.0.0”, “popper.js”: “^1.12”, “postcss”: “^8.1.14”, “resolve-url-loader”: “^2.3.1”, “sass”: “^1.20.1”, “sass-loader”: “^11.0.1”, “vue”: “^2.5.17”, “vue-loader”: “^15.9.6”, “vue-style-loader”: “^4.1.3”, “vue-template-compiler”: “^2.6.10” } }

Steps To Reproduce:

Create a new laravel project and make sure node-sass and loaders are installed. The variables scss partial should already be created. add this to webpack.mix file mix.js(‘resources/js/app.js’, ‘public/js’) .vue() .sass(‘resources/sass/app.scss’, ‘public/css’) .options({ extractVueStyles: true, globalVueStyles: ‘resources/sass/_variables.scss’, }) .version(); and see if you can use one of the variables in that file in your vue component. don’t forget to add lang=“scss”

[thecrypticace]

This is because how we handle this changed in Mix v6: https://github.com/JeffreyWay/laravel-mix/blob/467f0c9b01b7da71c519619ba8b310422321e0d6/UPGRADE.md#vue-configuration

I’ll make a note to add some warnings for this.

[nathancall]

Same! This would be super helpful to sort out.