How to implicitly load global SCSS files in Vue Single File Components?

[corysimmons]

• Laravel Mix Version: 1.2.2
• Node Version (node -v): v7.4.0
• NPM Version (npm -v): 5.2.0
• OS: macOS Sierra

Description:

I'd like to be able to import a couple Sass files globally: https://vue-loader.vuejs.org/en/configurations/pre-processors.html#loading-a-global-settings-file

I can do this by explicitly defining the @import in each .vue file, but this is pretty brittle (if I move some .scss into a new directory my @imports will break).

Come to think of it, I probably won't be migrating these really generic .scss files much, but at this point I'm just curious.

I tried:

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

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.vue$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve(__dirname, 'resources/assets/sass/_variables.scss')
          }
        }
      ]
    }
  })

...per:

• https://laravel.com/docs/5.4/mix#custom-webpack-configuration
• https://vue-loader.vuejs.org/en/configurations/pre-processors.html#loading-a-global-settings-file

...but kept running into:

 error  in ./resources/assets/js/components/Foo.vue

Module build failed:
undefined
             ^
      Undefined variable: "$fav-color".
      in /Users/yo/Desktop/Blah/resources/assets/js/components/Foo.vue (line 89, column 15)

($fav-color exists in _variables.scss)

I suspect the problem lies somewhere in your webpack-rules.js, but haven't really tinkered with it.

Feel free not to worry about this, but it might be nice to add vue-loader's official solution to Mix.

Thanks for all your hard work. Grats on the kiddo.

[JeffreyWay]

Closing this in favor of the PR. #1163