globally include a settings.scss with vue-loader?

+1

@westwick, @gsa

// webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            'GlobalSass': path.resolve('resources/assets/sass/_bootstrap.scss')
        }
    },
});

<!-- Single Vue component file -->
<template>
  <div class="component"></div>
</template>

<script>
  export default {}
</script>

<style lang="scss">
  @import '~GlobalSass';
  .component {
    color: $red;
  }
</style>

You still have to write the code to import SCSS file, but at least you don't have to mess around with ./../../../ in your code.

Hope that helps. Best, Alen.

You can create a snippet, if your editor allows it, so you're not writing template structure each time.

Something like this, if using SublimeText

<snippet>
<content><![CDATA[
<template>
    <div>
        ${1:<!-- template -->}
    </div>
</template>
<script>
    export default {
        ${2://}
    }
</script>
<style lang="scss">
    @import '~GlobalSass';
    ${3://}
</style>
]]></content>
<tabTrigger>vue-template</tabTrigger>
</snippet>

You can view this thread on github to see how to load styles globally in each component without having to import each time: https://github.com/vuejs/vue-loader/issues/328

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

then edit your webpack (build/util.js)

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/style/_variables.scss')
    }
  }
),

Hey! laravel-mix was just updated with a merge request to do exactly this!

It's available in v1.6.0 and later. Check out the new globalVueStyles and read it's requirements carefully.

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md

I have been unable to get the new globalVueStyles working. When I did set globalVueStyles and extractVueStyles: true, my primary scss file loaded via the mix .sass loader did not compile correctly.