我无法使用 sass-resources-loader 在 vuejs 中加载配置 scss 文件答案

【问题标题】：I can't load configuration scss file in vuejs using sass-resources-loader我无法使用 sass-resources-loader 在 vuejs 中加载配置 scss 文件
【发布时间】：2019-03-19 01:10:41
【问题描述】：

webpack.base.conf.js

module: {
rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: 'vue-style-loader!css-loader!sass-loader',
        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
      }
    }
  },
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/scss/_variables.scss')
    }
  },

我的“变量”文件开始加载，但随后出现此错误：

Module parse failed: Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
| $white: #ffffff;
| 
| // The Vue build version to load with the `import` command

我使用这本手册：

https://vue-loader-v14.vuejs.org/en/configurations/pre-processors.html

vue 版本：2.93

【问题讨论】：

标签： vue.js webpack sass-loader

【解决方案1】：

最终我使用 vue-cli@3 从头开始创建项目并添加到 vue.config.js 这段代码：

const path = require('path');

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: [
            path.resolve(__dirname, './src/assets/scss/_variables.scss'),
            path.resolve(__dirname, './src/assets/scss/_mixins.scss'),
          ]
        })
        .end()
    })
  }
}

【讨论】：

【解决方案2】：

您可能希望将其添加到根目录中的 vue.config.js 文件中。如果该文件不存在，请创建它并按照以下内容添加一些内容（我的配置）：

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

【讨论】：

谢谢，但它对我不起作用。我应该对我的 webpack.base.conf.js 进行一些更改吗？
你安装vue cli了吗？如果你使用上面的配置，你不需要 webpack 配置中的代码。确保您在 package.json 的 devDependencies 下也有以下内容：“css-loader”：“^1.0.0”、“sass-loader”：“^7.1.0”、
是的。我有这些依赖项。看起来 webpack 忽略了我的 vue.config.js 。
您现在应该使用“prependData”而不是现在已弃用的“data”（sass-loader v8）