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

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.

Answer 2

Been there - unfortunately there is not a way to do this without importing the file in each component. To get around this, you could try creating helper classes with color: $some-variable and background-color: $some-variable which may cover some of your use cases.

If you do import a file in each one, make sure it only contains variables. You don't want to include style rules multiple times.

Otherwise, I would create separate .scss files for each component. You can still use .vue templates for html and js, but keep your styles separate. This is probably the most efficient way to do it.

Answer 3

If you use the Vue webpack template, you can fix it with one line of code in build/utils.js: scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])

Then, in src/assets/styles/app, you add all the @imports and voilà!

Answer 4

For users using Vue CLI, read https://cli.vuejs.org/guide/css.html#css-modules. Example:

// vue.config.js
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

This fixed it for me perfectly.

Answer 5

The official docs have been updated since I asked this question: https://vue-loader.vuejs.org/en/configurations/pre-processors.html

For anyone else viewing this in 2017 and beyond, check out the instructions under 'loading a global settings file'.

Answer 6

I don't believe you can globally import a file. I probably wouldn't do this anyway, it's not explicit enough. If someone wants to move that component into another project they would have no idea it relies on that file.

You can, however, make the path management a lot easier. You can add this to your webpack config file...

sassLoader: {
  includePaths: [
    path.resolve(__dirname, './sass')
  ]
},

Then you can include files from your projects root /sass directory freely without worrying about the paths.