Vue CLI 3升级后sass-resources-loader报错：Cannot read property 'scss' of undefined

嘿，遇到这种依赖更新后的配置报错确实头疼，我帮你梳理下排查方向和可行的修复方案：

问题根源分析 #

你遇到的TypeError: Cannot read property 'scss' of undefined，本质是Vue CLI/依赖更新后，vue-loader的options结构发生了变化——原来挂载在options.loaders下的scss配置项，现在已经不在这个层级了（从你打印的{ compilerOptions: { preserveWhitespace: false } }也能看出来）。

具体排查步骤 #

1. 核对依赖版本变化 #

更新依赖后，以下几个核心包的版本变动可能导致配置失效：

• vue-loader：Vue CLI对它的封装逻辑可能调整
• sass-loader：大版本升级会改变loader的调用方式
• sass-resources-loader：需要和sass-loader版本兼容

你可以运行这个命令查看当前版本：

npm list vue-loader sass-loader sass-resources-loader

对比更新前的版本（比如查看package-lock.json的历史记录），如果有跨大版本升级，大概率是版本兼容问题。

2. 理解当前Vue CLI的loader规则结构 #

Vue CLI更新后，单文件组件里的scss样式处理，已经和单独的.scss文件统一归到module.rule('scss')下的子规则（oneOf）里管理，不再通过vue-loader的options.loaders来配置。所以你原来修改vue-loader的loaders的方式已经失效了。

修复后的配置方案 #

把原来的配置改成针对scss规则添加sass-resources-loader，以下是简洁且兼容当前Vue CLI的写法：

const path = require('path') 
module.exports = { 
  chainWebpack: (config) => { 
    // 遍历所有scss相关的子规则，统一添加sass-resources-loader
    const scssRuleTypes = ['vue-modules', 'vue', 'normal-modules', 'normal']
    scssRuleTypes.forEach(type => {
      config.module.rule('scss').oneOf(type)
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: [
            path.resolve('./src/scss/_variables.scss'),
            path.resolve('./src/scss/_mixins.scss')
          ]
        })
        // 确保loader的执行顺序正确，放在sass-loader之后
        .before('sass-loader')
    })
  }
}

额外注意点 #

• 如果还是报错，尝试删除node_modules和package-lock.json，重新执行npm install，确保依赖安装干净。
• 检查sass-resources-loader的版本，建议安装和当前sass-loader兼容的版本（比如sass-loader@10+可以搭配sass-resources-loader@2.2.1）。

内容的提问来源于stack exchange，提问作者Andrew Boyd