SassError: (背景颜色: rgba(22, 15, 15, 0), 颜色: rgba(255, 255, 255, 0.9)) 不是有效的 CSS 值

Question

从 Angular v14 升级到 Angular v15 后出现 SassError 和

npm install

./playground/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.
   ╷
17 │ $themes: xm-register-theme($theme, basic);
   │                            ^^^^^^
   ╵
  framework/src/theme/styles/_themes.scss 17:28  @forward
  framework/src/theme/styles/_all.scss 2:1       @forward
  playground/styles.scss 3:1                     root stylesheet

./playground/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.
   ╷
17 │ $themes: xm-register-theme($theme, basic);
   │                            ^^^^^^
   ╵
  framework/src/theme/styles/_themes.scss 17:28  @forward
  framework/src/theme/styles/_all.scss 2:1       @forward
  playground/styles.scss 3:1                     root stylesheet

./playground/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.
   ╷
17 │ $themes: xm-register-theme($theme, basic);
   │                            ^^^^^^
   ╵
  framework/src/theme/styles/_themes.scss 17:28  @forward
  framework/src/theme/styles/_all.scss 2:1       @forward
  playground/styles.scss 3:1                     root stylesheet



** Angular Live Development Server is listening on localhost:60113, open your browser on http://localhost:60113/ **


✖ Failed to compile.
✔ Browser application bundle generation complete.

rm -rf node_modules
rm -rf package-lock.json
npm install -g @angular/[email protected]
npm install --save-dev @angular/[email protected]
npm install
ng cache clean && ng serve --port 7000

// $theme: null; // work
// $theme: (); // not work
$theme: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9));  // not work
$themes: xm-register-theme($theme, basic);

Compiled with problems:

ERROR in ./playground/styles.scss?ngGlobalStyle (./playground/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./playground/styles.scss?ngGlobalStyle)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.
   ╷
17 │ $themes: xm-register-theme($theme, basic);
   │                            ^^^^^^
   ╵
  framework/src/theme/styles/_themes.scss 17:28  @forward
  framework/src/theme/styles/_all.scss 2:1       @forward
  playground/styles.scss 3:1                     root stylesheet


ERROR in ./playground/styles.scss?ngGlobalStyle

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.
   ╷
17 │ $themes: xm-register-theme($theme, basic);
   │                            ^^^^^^
   ╵
  framework/src/theme/styles/_themes.scss 17:28  @forward
  framework/src/theme/styles/_all.scss 2:1       @forward
  playground/styles.scss 3:1                     root stylesheet


ERROR in ./playground/styles.scss?ngGlobalStyle

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.
   ╷
17 │ $themes: xm-register-theme($theme, basic);
   │                            ^^^^^^
   ╵
  framework/src/theme/styles/_themes.scss 17:28  @forward
  framework/src/theme/styles/_all.scss 2:1       @forward
  playground/styles.scss 3:1                     root stylesheet
    at tryRunOrWebpackError (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:5015:18)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:5086:20
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3485:9)
    at done (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/Hook.js:18:14)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4993:43
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3463:5)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4958:16
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3485:9)
    at timesSync (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3463:5)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4926:15
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3485:9)
    at done (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3527:9)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4873:8
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:3352:32
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Cache.js:107:20)
    at ItemCacheFacade.store (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/CacheFacade.js:137:15)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:3352:11
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/CacheFacade.js:111:15)
    at Compilation._codeGenerationModule (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:3322:9)
    at codeGen (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4861:11)
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3463:5)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4891:14
    at processQueue (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/util/processAsyncTree.js:55:4)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.
   ╷
17 │ $themes: xm-register-theme($theme, basic);
   │                            ^^^^^^
   ╵
  framework/src/theme/styles/_themes.scss 17:28  @forward
  framework/src/theme/styles/_all.scss 2:1       @forward
  playground/styles.scss 3:1                     root stylesheet
    at Object.<anonymous> (/Volumes/WORK/Gitspace/xm/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Volumes/WORK/Gitspace/xm/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Volumes/WORK/Gitspace/xm/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Volumes/WORK/Gitspace/xm/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Volumes/WORK/Gitspace/xm/playground/styles.scss?ngGlobalStyle:1:7)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/Hook.js:14:14)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:5060:39
    at tryRunOrWebpackError (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:5015:18)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:5086:20
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3485:9)
    at done (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/Hook.js:18:14)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4993:43
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3463:5)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4958:16
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3485:9)
    at timesSync (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3463:5)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4926:15
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3485:9)
    at done (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3527:9)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4873:8
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:3352:32
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Cache.js:107:20)
    at ItemCacheFacade.store (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/CacheFacade.js:137:15)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:3352:11
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/Volumes/WORK/Gitspace/xm/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/CacheFacade.js:111:15)
    at Compilation._codeGenerationModule (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:3322:9)
    at codeGen (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4861:11)
    at symbolIterator (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Volumes/WORK/Gitspace/xm/node_modules/neo-async/async.js:3463:5)
    at /Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4891:14
    at processQueue (/Volumes/WORK/Gitspace/xm/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/util/processAsyncTree.js:55:4)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

Generated code for /Volumes/WORK/Gitspace/xm/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Volumes/WORK/Gitspace/xm/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Volumes/WORK/Gitspace/xm/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Volumes/WORK/Gitspace/xm/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Volumes/WORK/Gitspace/xm/playground/styles.scss?ngGlobalStyle
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: (background-color: rgba(22, 15, 15, 0), color: rgba(255, 255, 255, 0.9)) isn't a valid CSS value.\n   ╷\n17 │ $themes: xm-register-theme($theme, basic);\n   │                            ^^^^^^\n   ╵\n  framework/src/theme/styles/_themes.scss 17:28  @forward\n  framework/src/theme/styles/_all.scss 2:1       @forward\n  playground/styles.scss 3:1                     root stylesheet");

()

()

()

()

Answer 1

删除node_modules和package-lock文件并运行npm cache clean --force，然后重新安装