我有一个Vue 3项目，在assets目录下有一些.scss文件，它工作得很好（有一个main.scss文件，每次我保存main.scss文件时，它都会构建一个新的main.css，使用扩展名：（英语：Live Sass Quarters）但是，当我试图通过将lang=“scss”添加到“style”标签中来在我的一个vue文件中添加SASS时，它不起作用，并给我一个错误。所以，然后我试着用npm安装sass和sass-loader，运行应用程序时仍然出错。

• 节点版本：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"
  ]
}

Component.vue

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

在添加了上面的代码行并添加了一些SASS样式之后，在终端中出现了下一个错误，这是我之前在运行npm run serve时提到的：

> [email protected] 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.

My codebox example。