使用sass-resources-loader和vue-cli v3.x

Question

如何使用sass-resources-loader和vue-cli@3.x添加全局scss变量和mixin。

Answer 1

正如您在the docs中看到的，最简单的方法是使用loaderOptions作为sass预处理器。不需要任何额外的依赖：

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

Answer 2

vue-cli@3.x使用webpack-chain来管理其webpack配置。将sass-resources-loader添加到预定义的webpack配置中。将以下内容添加到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'),
      })
  },
}

希望这有帮助！

Answer 3

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