vue.js - 我无法使用 sass-resources-loader 在 vuejs 中加载配置 scss 文件

Question

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

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

Answer 2

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

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