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

【问题标题】：SassError: Undefined variable. Failing dependenciesSassError：未定义的变量。失败的依赖
【发布时间】：2022-08-02 19:10:32
【问题描述】：

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

./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
- Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):         SassError: Undefined variable.
    ╷ 142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵   node_modules\\bootstrap\\scss\\_utilities.scss 142:15  @import   src\\styles.scss 7:9                                 root stylesheet

./src/styles.scss - 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: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\\bootstrap\\scss\\_utilities.scss 142:15  @import
  src\\styles.scss 7:9                                 root stylesheet
    at tryRunOrWebpackError (C:\\User\\user\\project\\node_modules\\webpack\\lib\\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4979:12)
    at __webpack_require__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4936:18)
    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:5007:20
    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3485:9)
    at done (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\\User\\user\\project\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\User\\user\\project\\node_modules\\tapable\\lib\\Hook.js:18:14)
    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4914:43
    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3482:9)
    at timesSync (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:2297:7)
    at Object.eachLimit (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3463:5)
    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4879:16
    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3485:9)
    at timesSync (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:2297:7)
    at Object.eachLimit (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\\bootstrap\\scss\\_utilities.scss 142:15  @import
  src\\styles.scss 7:9                                 root stylesheet
    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)
    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\javascript\\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (C:\\User\\user\\project\\node_modules\\tapable\\lib\\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\\User\\user\\project\\node_modules\\tapable\\lib\\Hook.js:14:14)
    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4981:39
    at tryRunOrWebpackError (C:\\User\\user\\project\\node_modules\\webpack\\lib\\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4979:12)
    at __webpack_require__ (C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4936:18)
    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:5007:20
    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3485:9)
    at done (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\\User\\user\\project\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\User\\user\\project\\node_modules\\tapable\\lib\\Hook.js:18:14)
    at C:\\User\\user\\project\\node_modules\\webpack\\lib\\Compilation.js:4914:43
    at symbolIterator (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:3482:9)
    at timesSync (C:\\User\\user\\project\\node_modules\\neo-async\\async.js:2297:7)

Generated 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
1 | throw new Error(\"Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\\nSassError: Undefined variable.\\n    ╷\\n142 │       values: $utilities-border-colors\\n    │               ^^^^^^^^^^^^^^^^^^^^^^^^\\n    ╵\\n  node_modules\\\\bootstrap\\\\scss\\\\_utilities.scss 142:15  @import\\n  src\\\\styles.scss 7:9                                 root stylesheet\");

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

这是我的 package.json

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

我什至不使用 $utilities-border-colors 变量，也没有出现在我的代码中。

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

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

提前致谢。

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

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

使用^ 样式版本控制的危险。这些东西中的任何一个都可能已安装为稍微不同的版本，现在会破坏某些东西。 Bootstrap，根据 npm 的错误消息，昨天推出了一个新版本。从它开始并将其锁定到特定版本（现在可能只有 5.1.3，所以只需删除 ^）并查看是否再次构建。
我从 Bootstrap 导入中删除了 ^，这个：\"bootstrap\": \"^5.1.3\", 现在它就像一个魅力，非常感谢！
github.com/twbs/bootstrap/issues/36785

标签： node.js angular build package-lock.json

【解决方案1】：

我会很贪心，把它当做一个答案，这样它就可以被接受，并且一个可供后面的人使用。

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

【讨论】：

【解决方案2】：

你说得对，这有点奇怪，它没有改变任何东西就发生了。
原因是昨天commit 发生在主分支twbs/ 引导程序，这v5.2.0更新。

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

此外，如果您介意安装 v5.2.0 更新，请务必了解新的 Sass 文件_maps.scss它带有几个来自 _variables.scss 的 Sasss 映射。
你可以阅读更多here。

【讨论】：

感谢分享！我从昨天开始就在这了 smh

【解决方案3】：

您可以尝试删除您的node_modules 目录和package-lock.json 文件。然后npm install。

并检查错误是否仍然附加。

正如@krenom 所说，它可能是在构建期间下载的更高的 boostrap 版本。您可以删除 package.json 中版本之前的 ^ 并重新安装您的 node_modules。

【讨论】：

【解决方案4】：

按此顺序加载引导模块并导入 maps 模块：

@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";

现在应该解决这个问题。

【讨论】：