Using sass-resources-loader with vue-cli v3.x

Question

How to use sass-resources-loader with [email protected] to add global scss variables and mixins.

Answer 1

As you can see in the docs, the easiest way is to use loaderOptions for the sass preprocessor. No need for any extra dependency:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
      }
    }
  }
};

Answer 2

[email protected] uses webpack-chain to manage its webpack config. To add sass-resources-loader to the predefined webpack config. Add the following to the vue.config.js

vue.config.js

const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack: (config) => {
    config
      .module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.loaders.scss = options.loaders.scss.concat({
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve('./src/scss/_variables.scss'),
          },
        })
        return options
      })

    config
      .module
      .rule('scss')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: path.resolve('./src/scss/_variables.scss'),
      })
  },
}

Hope this helps!

Answer 3

css: {
    loaderOptions: {
        stylus: {
            loader: 'stylus-resources-loader',
            import: [path.resolve(__dirname, 'src/styles/imports.styl')]
        }
    }
}