Vue CLI 3 sass-资源加载器 - Options.loaders 未定义

Question

几周前，我能够使用 3.0 版 CLI 成功配置一个新的 Vue 项目以使用 sass-resource-loader，使用此处发布的信息：

然而，在今天更新完所有内容后，我在运行 npm run serve:

时遇到以下错误

TypeError: Cannot read property 'scss' of undefined

似乎传递给 .tap(options) 的唯一选项是：

{ compilerOptions: { preserveWhitespace: false } }

我目前对 chainWebpack 的了解还不足以有效地进行调试，但我正在努力。如果有人对导致此错误的更改有任何见解，我们将不胜感激。

我的vue.config.js:

const path = require('path')

module.exports = {
  chainWebpack: (config) => {
    config
      .module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        console.log(options)
        options.loaders.scss = options.loaders.scss.concat({
          loader: 'sass-resources-loader',
          options: {
            resources: [
              path.resolve('./src/scss/_variables.scss'),
              path.resolve('./src/scss/_mixins.scss')
            ]
          },
        })
        return options
      })
    config
      .module
      .rule('scss')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: [
          path.resolve('./src/scss/_variables.scss'),
          path.resolve('./src/scss/_mixins.scss')
        ]
      })
  }
}

Answer 1

您使用vue-cli@3.x，这可能意味着您的项目使用vue-loader@15.x Since version 15，vue-loader 不需要加载程序的额外配置。您只能配置主要的 webpack 加载器。

const path = require('path')

module.exports = {
  chainWebpack: (config) => {
    config
      .module
      .rule('scss')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: [
          path.resolve('./src/scss/_variables.scss'),
          path.resolve('./src/scss/_mixins.scss')
        ]
      })
  }
}

You can also inspect webpack configs using the vue inspect or ./node_modules/.bin/vue-cli-service inspect commands.

Vue CLI 3 sass-资源加载器 - Options.loaders 未定义

Vue CLI 3 sass-resources-loader - Options.loaders undefined

javascript

webpack

vue.js

vue-cli