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

Question

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

- Pranesh Ravi

Answer 1

正如您在 文档 中看到的那样，最简单的方法是使用loaderOptions来处理Sass预处理器。不需要任何额外的依赖项：

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

- Alex JM

---

正如@constant-meiring之前提到的那样，使用vue-loader 15是解决这个问题的正确方法。 - AldoRomo88

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'),
      })
  },
}

希望这能帮到你！

- Pranesh Ravi

---

在我的情况下，vue-loader选项仅包含{compilerOptions: {preserveWhitespace: false}}，这导致TypeError：无法读取未定义的属性'scss'。你有什么想法是错了吗？ - farincz

似乎在使用 vue-loader 15 版本后这个功能已经无法正常工作了。 - Constant Meiring

Answer 3

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

- Bendy Plubs

---

虽然这段代码可能回答了问题，但提供关于该代码为什么和/或如何回答问题的额外背景信息可以提高其长期价值。 - mburesh