Vue2.6升级至Vue2.7后出现SassError：无法找到导入样式表

核心问题 #

升级到Vue 2.7.13后，sass-loader的配置参数发生变更，原配置里的prependData已被废弃，改用additionalData，导致全局变量自动导入的配置失效，进而触发样式文件找不到的报错。

修复步骤 #

1. 更新vue.config.js的Sass配置
   将原配置中的prependData替换为additionalData，适配新版sass-loader要求：

css: {
  loaderOptions: {
    sass: {
      // 替换prependData为additionalData
      additionalData: '@import "@/assets/styles/variables.scss";'
    },
    // 若使用scss语法，同步更新配置
    scss: {
      additionalData: '@import "@/assets/styles/variables.scss";'
    }
  }
}

2. 确认路径别名@的有效性
   确保@已正确指向项目src目录，可在vue.config.js中补充或验证别名配置：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  // ...其他原有配置
}

3. 适配依赖版本兼容性
   Vue 2.7对相关loader版本有要求，确保sass-loader版本在^10.0.0及以上，sass（dart-sass）版本匹配。可在package.json中更新依赖后重新安装：

{
  "devDependencies": {
    "sass": "^1.63.0",
    "sass-loader": "^12.6.0"
  }
}

执行命令更新依赖：

rm -rf node_modules package-lock.json # yarn环境替换为yarn.lock
npm install

4. 清理缓存后重新构建
   清理构建缓存并重新编译项目：

npm run clean # 若项目有该脚本，无则直接执行构建
npm run build

额外检查点 #

• 确认@/assets/styles/variables.scss文件路径完全正确，注意大小写（Linux/macOS环境下路径大小写敏感）。
• 若组件内手动导入了该变量文件，可暂时注释，测试自动导入是否生效。

内容的提问来源于stack exchange，提问作者Ihor Byra