将 sass-resources-loader 与 vue-cli v3.x 一起使用答案

【问题标题】：Using sass-resources-loader with vue-cli v3.x将 sass-resources-loader 与 vue-cli v3.x 一起使用
【发布时间】：2018-08-11 15:58:35
【问题描述】：

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

【问题讨论】：

标签： webpack vue.js vue-cli

【解决方案1】：

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

希望这会有所帮助！

【讨论】：

在我的情况下，vue-loader 选项只包含 {compilerOptions: { preserveWhitespace: false }} 这导致 TypeError: Cannot read property 'scss' of undefined 知道有什么问题吗？
这似乎不再适用于 vue-loader 15。

【解决方案2】：

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

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

【讨论】：

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

【解决方案3】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或如何此代码回答问题的附加上下文可提高其长期价值.