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

Question

I was able to successfully configure a new Vue project using the 3.0 version of the CLI to use sass-resource-loader a few weeks ago using the information posted here: Using sass-resources-loader with vue-cli v3.x

However, after updating everything today I'm encountering the following error when running npm run serve:

TypeError: Cannot read property 'scss' of undefined

the only options that seem to be getting passed into .tap(options) are:

{ compilerOptions: { preserveWhitespace: false } }

I don't currently know enough about chainWebpack to effectively debug, but I'm working on it. If anyone has any insights into what's changed to cause this error, it'd be greatly appreciated.

my 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')
        ]
      })
  }
}

标签： javascriptwebpackvue.jsvue-cli

Answer 1

您使用vue-cli@3.x，这可能意味着您的项目使用vue-loader@15.x 自版本 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')
        ]
      })
  }
}

vue inspect您还可以使用or./node_modules/.bin/vue-cli-service inspect命令检查 webpack 配置。