Vue.js 我能'；t使用sass资源加载程序在vuejs中加载配置scss文件

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

我使用本手册：

---

vue版本：2.93

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

---

最终，我使用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()
    })
  }
}

---

谢谢，但这对我不起作用。我应该在webpack.base.conf.js中做一些更改吗？您是否安装了vue cli？如果您正在使用上述配置，则不需要webpack配置中的代码。确保在package.json的devdependences下也有以下内容：“css加载程序”：“^1.0.0”，“sass加载程序”：“^7.1.0”，是。我有这些依赖关系。看起来webpack忽略了我的vue.config.js。您现在应该使用“prependData”而不是现在不推荐使用的“data”（sass loader v8）

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()
    })
  }
}