Laravel-mix: [tutorial] How to use global Sass vars within Vue Single File Components

[corysimmons]

Tested with this version of Mix: https://github.com/JeffreyWay/laravel-mix/tree/29edf9ccbb73bf2048364a5890700365236395c9

From https://laravel.com/docs/5.4/mix#custom-webpack-configuration

// webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .webpackConfig({
    resolve: {
      alias: {
        '@': path.resolve('resources/assets/sass')
      }
    }
  })

// resources/assets/js/components/Example.vue

<template>
  <h1>Hello Global Sass Variables</h1>
</template>

<style lang="scss" scoped>
  @import '~@/_variables.scss';

  h1 {
    background: $my-favorite-color;
  }
</style>

• From this vue-loader issue: https://github.com/vuejs/vue-loader/issues/328
• This solution particularly: https://github.com/vuejs/vue-loader/issues/328#issuecomment-313225009

This allows you to explicitly import global variables into any Vue component.

To load them implicitly via Webpack, I tried https://vue-loader.vuejs.org/en/configurations/pre-processors.html#loading-a-global-settings-file but didn't have success. Will open an issue where I think the problem lies.

[corysimmons]

Now that I think about it, you probably will never migrate things like resources/assets/sass/_vars.scss and resources/assets/sass/_mixins.scss so the above solution should be fine for almost everyone.

[iamface]

This works well to have standalone .scss files for specific components and only include those styles per component.

[DarkZek]

In newer laravel versions it seems the webpack.mix.js should be changed to
.webpackConfig({ resolve: { alias: { '@': path.resolve('resources/sass') } } });

[mrspence]

https://github.com/JeffreyWay/laravel-mix/issues/2050#issuecomment-514175936

[codekipple]

I think I have figured this out by adding some rules to the webpack settings in webpack.mix.js.
I added a rule targeting all .scss files which triggered the sass-loader.

.webpackConfig({
      resolve: {
         alias: {
            '@': path.resolve('resources/sass'),
         },
      },
      module: {
         rules: [
            {
               test: /\.scss$/,
               loader: "sass-loader",
               options: {
                  data: `
                        @import "~@/settings/vars.scss";
                        @import "~@/settings/vars-bootstrap.scss";
                        @import "~@/settings/functions.scss";
                  `
               }
            }
         ]
      }
   })