Vue3项目中.vue文件style标签使用SASS报错求助

我有一个Vue3项目，assets目录下的.scss文件可通过Live Sass Compiler插件正常编译为main.css，但在.vue文件的style标签中添加lang="scss"并写入SASS样式时出现报错。之后通过npm安装了sass和sass-loader，运行npm run serve启动项目时仍然报错。

环境版本信息 #

• Node版本：v16.15.0
• NPM版本：8.11.0
• PNPM版本：6.14.5

package.json 内容 #

{"name": "post-app","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"8": "0.0.1","core-js": "^3.6.5","date-fns": "^2.23.0","firebase": "^8.10.0","register-service-worker": "^1.7.1","sass": "^1.67.0","uniqid": "^5.4.0","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-pwa": "^4.5.13","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","sass-loader": "^12.1.0"},"browserslist": ["> 1%","last 2 versions","not dead"]}

组件中的style标签 #

<style lang="scss"></style>

终端报错信息 #

> post-app@0.1.0 serve C:\users\aligu\desktop\post-app
> vue-cli-service serve

Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
 INFO  Starting development server...
13% building 27/28 modules 1 active ...oader\dist\cjs.js??ref--0-0!C:\Users\aligu\Desktop\Post-App\node_modules\@vue\cli-service\node_modules\vue-loader-v16\dist\index.js??ref--0-1!C:\users\aligu\desktop\post-app\src\App.vueC:\Users\aligu\Desktop\Post-App\node_modules\webpack\lib\Dependency.js:353
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (C:\Users\aligu\Desktop\Post-App\node_modules\webpack\lib\Dependency.js:353:9)
    at iterationDependencies (C:\Users\aligu\Desktop\Post-App\node_modules\@vue\cli-service\node_modules\webpack\lib\Compilation.js:940:21)
    at C:\Users\aligu\Desktop\Post-App\node_modules\@vue\cli-service\node_modules\webpack\lib\Compilation.js:950:8
    at C:\Users\aligu\Desktop\Post-App\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:409:6
    at C:\Users\aligu\Desktop\Post-App\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:155:13
    at eval (eval at create (C:\Users\aligu\Desktop\Post-App\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:14:1)
    at C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:178:9
    at C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:125:7
    at C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:125:7
    at CaseSensitivePathsPlugin.fileExistsWithCase (C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:95:5)
    at C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:118:10
    at CaseSensitivePathsPlugin.getFilenamesInDir (C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:52:5)
    at CaseSensitivePathsPlugin.fileExistsWithCase (C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:101:8)
    at C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:118:10
    at Array.<anonymous> (C:\Users\aligu\Desktop\Post-App\node_modules\case-sensitive-paths-webpack-plugin\index.js:72:5)
    at Storage.finished (C:\Users\aligu\Desktop\Post-App\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
ERROR Command failed with exit code 1.

解决方法 #

问题根源 #

报错是由于sass版本过高，与当前@vue/cli-service@~4.5.0版本不兼容。该cli版本对应的webpack版本较低，无法适配高版本sass的编译逻辑。

操作步骤 #

1. 卸载当前高版本sass：

npm uninstall sass

2. 安装与cli版本兼容的低版本sass（推荐^1.32.12）：

npm install sass@^1.32.12 --save-dev

3. （可选）清理依赖缓存，确保安装干净：

rm -rf node_modules package-lock.json
npm install

4. 重新启动项目：

npm run serve

另外，你的package.json中存在无用依赖"8": "0.0.1"，建议删除，避免潜在冲突。

内容的提问来源于stack exchange，提问作者Ali Guliyev