Laravel-mix: globalVueStyles doesn't work

[jordangunther]

• Laravel Mix Version: #.#.# (npm list --depth=0)
  ── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── popper.[email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  └── [email protected]

• 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"

[erfranson]

I have the same issue, I can't get globalVueStyles to work. Been looking for a clear answer for days.

[nathancall]

Same! This would be super helpful to sort out.

[RussDaley-ss]

Yes Please! I need help with this.

[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.

[erfranson]

Thanks so much!!