vue.js: always load a settings.scss file in every vue style section

Question

I find myself repeating this same pattern in every .vue file, in order to use variables, etc.:

<style lang="scss">
  @import "../styles/settings.scss";

  .someclass { color: $some-variable; }
</style>

or if it's nested in a folder I have to remember to be careful with the path:

<style lang="scss">
  @import "../../styles/settings.scss";

</style>

Is there a way to globally import that settings.scss file in every .vue file I create? I looked in the docs and didn't see it, but maybe I missed it, or maybe this is something I need to leverage webpack to do?

Answer 1

I have struggled with the same question for a while. But there's a really simple fix. This feature comes through node-sass itself.

so you can declare your scss globals in a file, say globals.scss whose path is:

/src/scss/globals.scss

Now you can simply edit the vue-loader config:

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/scss/globals"',
  scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/scss/globals";'
}

and voila! You have the scss globals available across all your vue components. Hope it helps!

Update:

A lot of settings have been updated in new releases of vue. So the above changes may not seem trvial in latest vue projects. So I'll brief how everything is tied together-

Short version:

Find build/utils.js which would contain a method (most probably named cssLoaders() ). This method would return an object like this :

return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
   ...
  }

You simply need to change the scss/sass specific line to something like this:

 return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";']),
   ...
  }

Long Version:

webpack.base.conf.js contains vue-loader in it, it would look something like this :

    ...    
    {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
        },
    ...

The vueLoaderConfig variable is imported from the vue-loader.conf.js file, which is equal to this object:

    {
      loaders: utils.cssLoaders( Obj ),  // actual settings coming from cssLoader method of build/utils.js
      transformToRequire: {
       //some key value pairs would be here
      }
    }

in build/utils.js file we find the cssLoaders() method which returns: ....

     return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }

You simply need to update the above code with updated scss configuration like this:

       ...
        {
           ...
            scss: generateLoaders(['css', 'sass?data=@import"~assets/scss/main";']),
           ...
         }
        ...

Thus, the variables/mixins written in src/assets/scss/main.scss file will be available across all your components.