SassError：未定义的变量。依赖失败

Question

我有一个用于 Angular 项目的 CI/CD 管道，昨天运行良好，但今天相同的代码在构建中返回了几个错误：

\n

./src/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]!./src/styles.scss\n- Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):         SassError: Undefined variable.\n    \xe2\x95\xb7 142 \xe2\x94\x82       values: $utilities-border-colors\n    \xe2\x94\x82               ^^^^^^^^^^^^^^^^^^^^^^^^\n    \xe2\x95\xb5   node_modules\\bootstrap\\scss\\_utilities.scss 142:15  @import   src\\styles.scss 7:9                                 root stylesheet\n\n./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nHookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n    \xe2\x95\xb7\n142 \xe2\x94\x82       values: $utilities-border-colors\n    \xe2\x94\x82               ^^^^^^^^^^^^^^^^^^^^^^^^\n    \xe2\x95\xb5\n  node_modules\\bootstrap\\scss\\_utilities.scss 142:15  @import\n  src\\styles.scss 7:9                                 root stylesheet\n    at tryRunOrWebpackError (C:\\User\\user\\project\\node_modules\\webpack\\lib\\HookWebpackError.js:88:9)\n    at __webpack_require_module__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4979:12)\n    at __webpack_require__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4936:18)\n    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:5007:20\n    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3485:9)\n    at done (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3527:9)\n    at Hook.eval [as callAsync] (eval at create (C:\\User\\user\\project\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:15:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\User\\user\\project\\node_modules\\tapable\\lib\\Hook.js:18:14)\n    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4914:43\n    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3482:9)\n    at timesSync (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:2297:7)\n    at Object.eachLimit (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3463:5)\n    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4879:16\n    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3485:9)\n    at timesSync (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:2297:7)\n    at Object.eachLimit (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3463:5)\n-- inner error --\nError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n    \xe2\x95\xb7\n142 \xe2\x94\x82       values: $utilities-border-colors\n    \xe2\x94\x82               ^^^^^^^^^^^^^^^^^^^^^^^^\n    \xe2\x95\xb5\n  node_modules\\bootstrap\\scss\\_utilities.scss 142:15  @import\n  src\\styles.scss 7:9                                 root stylesheet\n    at Object.<anonymous> (C:\\User\\user\\project\\node_modules\\css-loader\\dist\\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\\User\\user\\project\\node_modules\\postcss-loader\\dist\\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\\User\\user\\project\\node_modules\\resolve-url-loader\\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\\User\\user\\project\\node_modules\\sass-loader\\dist\\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\\User\\user\\project\\src\\styles.scss:1:7)\n    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\javascript\\JavascriptModulesPlugin.js:432:11\n    at Hook.eval [as call] (eval at create (C:\\User\\user\\project\\node_modules\\tapable\\lib\\HookCodeFactory.js:19:10), <anonymous>:7:1)\n    at Hook.CALL_DELEGATE [as _call] (C:\\User\\user\\project\\node_modules\\tapable\\lib\\Hook.js:14:14)\n    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4981:39\n    at tryRunOrWebpackError (C:\\User\\user\\project\\node_modules\\webpack\\lib\\HookWebpackError.js:83:7)\n    at __webpack_require_module__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4979:12)\n    at __webpack_require__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4936:18)\n    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:5007:20\n    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3485:9)\n    at done (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3527:9)\n    at Hook.eval [as callAsync] (eval at create (C:\\User\\user\\project\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:15:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\User\\user\\project\\node_modules\\tapable\\lib\\Hook.js:18:14)\n    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4914:43\n    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3482:9)\n    at timesSync (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:2297:7)\n\nGenerated code for C:\\User\\user\\project\\node_modules\\css-loader\\dist\\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\\User\\user\\project\\node_modules\\postcss-loader\\dist\\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\\User\\user\\project\\node_modules\\resolve-url-loader\\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\\User\\user\\project\\node_modules\\sass-loader\\dist\\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\\User\\user\\project\\src\\styles.scss\n1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\\nSassError: Undefined variable.\\n    \xe2\x95\xb7\\n142 \xe2\x94\x82       values: $utilities-border-colors\\n    \xe2\x94\x82               ^^^^^^^^^^^^^^^^^^^^^^^^\\n    \xe2\x95\xb5\\n  node_modules\\\\bootstrap\\\\scss\\\\_utilities.scss 142:15  @import\\n  src\\\\styles.scss 7:9                                 root stylesheet");\n

\n

当我删除 package-lock.json 并生成一个新的包时，我可以在本地重现它。

\n

这是我的 package.json

\n

{\n  "name": "app-name",\n  "version": "0.0.0",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve --host 0.0.0.0",\n    "dev": "ng serve --host 0.0.0.0 -c dev",\n    "debug": "ng serve --host 0.0.0.0 -c debug",\n    "serve:es5": "ng serve --configuration es5 --host 0.0.0.0",\n    "build:dev": "ng build --configuration=dev",\n    "build:preprod": "ng build --configuration=preprod",\n    "build:prod": "ng build --configuration=production",\n    "test": "ng test",\n    "lint": "ng lint",\n    "e2e": "ng e2e"\n  },\n  "private": true,\n  "dependencies": {\n    "@angular-architects/ddd": "^2.0.0",\n    "@angular/animations": "^13.2.2",\n    "@angular/cdk": "^13.2.2",\n    "@angular/common": "^13.2.2",\n    "@angular/compiler": "^13.2.2",\n    "@angular/core": "^13.2.2",\n    "@angular/forms": "^13.2.2",\n    "@angular/localize": "^13.2.2",\n    "@angular/material": "^13.2.2",\n    "@angular/material-moment-adapter": "^13.2.2",\n    "@angular/platform-browser": "^13.2.2",\n    "@angular/platform-browser-dynamic": "^13.2.2",\n    "@angular/router": "^13.2.2",\n    "@babel/runtime": "^7.16.0",\n    "@fortawesome/angular-fontawesome": "^0.10.0",\n    "@fortawesome/fontawesome-svg-core": "^1.3.0",\n    "@fortawesome/free-solid-svg-icons": "^6.0.0",\n    "@microsoft/applicationinsights-web": "^2.7.1",\n    "@ng-bootstrap/ng-bootstrap": "^12.0.0-beta.4",\n    "@ngrx/effects": "^13.0.2",\n    "@ngrx/store": "^13.0.2",\n    "@ngrx/store-devtools": "^13.0.2",\n    "@ngx-translate/core": "^10.0.2",\n    "@ngx-translate/http-loader": "^3.0.1",\n    "@popperjs/core": "^2.10.2",\n    "@types/bootstrap": "^5.1.6",\n    "@types/file-saver": "^2.0.3",\n    "@types/jquery": "^3.5.8",\n    "amplitude-js": "^8.17.0",\n    "bootstrap": "^5.1.3",\n    "bootstrap-icons": "^1.7.0",\n    "chart.js": "^2.9.4",\n    "classlist.js": "^1.1.20150312",\n    "core-js": "^2.6.12",\n    "dropzone": "^6.0.0-beta.2",\n    "file-saver": "^2.0.5",\n    "font-awesome": "^4.7.0",\n    "intl-tel-input": "^17.0.13",\n    "jquery": "^3.6.0",\n    "moment": "^2.29.1",\n    "ng-lottie": "git+https://github.com/Jrbebel/ng-lottie.git",\n    "ng2-nouislider": "^1.8.3",\n    "ngx-papaparse": "^5.0.0",\n    "nouislider": "^12.0.0",\n    "npm": "^8.11.0",\n    "poeditor-ci": "^1.15.0",\n    "pretty-checkbox": "^3.0.3",\n    "rxjs": "^6.6.7",\n    "tslib": "^2.0.0",\n    "uuid": "^3.4.0",\n    "xlsx": "^0.17.4",\n    "zone.js": "~0.11.4"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "~13.1.3",\n    "@angular-eslint/builder": "^12.0.0",\n    "@angular-eslint/eslint-plugin": "^12.0.0",\n    "@angular-eslint/eslint-plugin-template": "^12.0.0",\n    "@angular-eslint/schematics": "^13.1.0",\n    "@angular-eslint/template-parser": "^12.0.0",\n    "@angular/cli": "^13.2.3",\n    "@angular/compiler-cli": "^13.0.0",\n    "@angular/language-service": "^13.2.2",\n    "@types/chart.js": "^2.9.34",\n    "@types/node": "^12.20.45",\n    "@typescript-eslint/eslint-plugin": "4.28.2",\n    "@typescript-eslint/parser": "4.28.2",\n    "codelyzer": "^6.0.0",\n    "eslint": "^7.26.0",\n    "eslint-plugin-import": "2.22.1",\n    "eslint-plugin-jsdoc": "30.7.6",\n    "eslint-plugin-prefer-arrow": "1.2.2",\n    "protractor": "^7.0.0",\n    "ts-node": "~7.0.0",\n    "tslint": "~6.1.0",\n    "typescript": "4.5.5"\n  }\n}\n

\n

我什至不使用 $utilities-border-colors 变量，并且不存在于我的代码中。

\n

我的节点版本是 16.16\n我的 npm 版本是 8.14.0

\n

可能是我必须更新任何依赖项，为什么如果我没有更改任何内容，它现在就不起作用了？

\n

提前致谢。

\n

---

\n

正如 Krenom 的评论中所说，^从 Bootstrap 导入中删除 解决了这个问题。

\n

感谢您的回复和所有信息。

\n

Answer 1

Bootstrap v5.2 引入了一个名为_maps.scss. 您必须将其添加到主 Sass 文件中。

按以下顺序加载引导模块：

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps"; // **Newly added!**
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";

现在问题应该得到解决。

Answer 2

我会贪婪地把它作为答案，以便它可以被接受，并且可以供后续的人使用。

^使用样式版本控制的危险。这些东西中的任何一个都可能作为稍微不同的版本安装，现在会破坏某些东西。Bootstrap，根据错误消息猜测，昨天根据 npm 推出了新版本。从这个开始并将其锁定到特定版本（目前可能只是 5.1.3，因此只需删除^），然后看看是否可以再次构建。

Answer 3

你说得对，这有点奇怪，没有改变任何事情就发生了。
原因是昨天在twbs/ bootstrap 的主分支（v5.2.0更新）上进行了提交。

恢复更改的简单方法是遵循 @krenom 的建议。

此外，如果您介意安装 v5.2.0 更新，请务必了解新的 Sass 文件_maps.scss，该文件附带 _variables.scss 中的多个 Sass 映射。
你可以在这里阅读更多。