模块构建失败：（来自./node_modules/sass-loader/lib/loader.js的错误）

Question

我正在运行以下命令:

ng build --prod --aot --base-href ./

并收到以下提示：

ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js):

$clr-popover-box-shadow-color: rgba(clr-getColor(dark), 0.25);
                              ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in /Users/allan/git/dcfrontend/node_modules/@clr/ui/src/utils/_variables.global.scss (line 84, column 32)

我正在使用 Angular 7 和 Clarity 1.04。

以下是我从 angular.json 中提取出来的内容：

        "styles": [
          "node_modules/@clr/icons/clr-icons.min.css",
          "node_modules/@clr/ui/clr-ui.min.css",
          "node_modules/prismjs/themes/prism-solarizedlight.css",
          "src/styles.css",
          "node_modules/lato-font/css/lato-font.min.css"
        ],
        "scripts": [
          "node_modules/core-js/client/shim.min.js",
          "node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
          "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
          "node_modules/web-animations-js/web-animations.min.js",
          "node_modules/prismjs/prism.js",
          "node_modules/prismjs/components/prism-typescript.min.js",
          "node_modules/@clr/icons/clr-icons.min.js"
        ]

- Allan Bowe

---

请展示给我们 _variables.global.scss 文件，谢谢。 - Atomzwieback

https://github.com/vmware/clarity/blob/master/src/clr-angular/utils/_variables.global.scss - Allan Bowe

clr-getColor(dark) 返回什么？它不能是有效的颜色，否则您不会得到这些错误，可能是格式错误？ - Atomzwieback

我该如何测试这一部分？即在构建过程中发生的部分。 - Allan Bowe

Answer 1

我也遇到了同样的错误，通过运行下面的npm命令解决了问题：

npm rebuild node-sass

- Saniya syed qureshi

Answer 2

npm install node-sass

对我有效：）如果"npm rebuild node-sass"没有效果，只需尝试这个

- Gopal

Answer 3

这解决了我的问题 npm install --save-dev --unsafe-perm node-sass

- Kingsley

Answer 4

检查支持的版本。 我的机器上安装了node 12.x，并花了一个小时运行npm install node-sass和npm rebuild node-sass，并加入了--force和--save-dev提示。

什么都不起作用，直到我卸载了node 12.x并安装了node 10.x。 因此，如果你遇到相同的问题并且无法解决，请尝试以下步骤：

• 检查您的Node版本（运行node -v），如果它比10.x高
• 从您的计算机卸载Node 12.x
• 下载并安装Node 10.x
• 重新启动控制台/编辑器（对于所有人都不是必需的，并且可能在没有此步骤的情况下工作）

- Sunny Sharma

---

帮了我很多，之前浪费了很多时间。似乎新版本无法正确执行。 - Rhokai

Answer 5

使用NVM降低你的Node版本 - 99%的错误来自于node-sass支持的Node版本与你系统上运行的版本之间的冲突。这仍然是一个令人沮丧的问题！

- James Begg

---

我降级到了10.16.3版，但仍然遇到此问题。 - Deepak paramesh

Answer 6

我正在MAC OS上运行node -v 12.14.1，并在尝试修复npm audit (npm audit fix)时遇到了此问题。之后，我遇到了同样的问题和消息。我没有降低node版本的选项来尝试此页面上的一些建议，因此我尝试重新安装node-sass，但没有帮助。然而，重建依赖项确实有帮助。

我已删除node_modules文件夹，运行sudo npm install（较新的Mac OS存在某些权限问题，因此要使用sudo），然后运行npm rebuild node-sass，这解决了我的构建问题。如果此页面上的其他建议无效，我希望这也能帮助其他人。

- StefaDesign

Answer 7

我不知道是否有人需要看到这个。对于一些新版本的node，如15.X.X，npm rebuild node-sass不能直接使用。在我的情况下，解决方法是降级node版本，我降级到了版本10.16.3，然后运行npm rebuild node-sass命令，错误就不会再出现了。

- CaesarDon

Answer 8

在我的情况下，当我们从Angular 9.x升级到12.x时，我遇到了这个错误。我安装了多个版本的Node 12.2和12.14（*）。直到我卸载了12.2并执行了npm install之后，我才停止出现这个错误。

- Gayathri

Answer 9

在我的情况下，我没有从项目的根文件夹中运行（ng serve）。 移动到根文件夹对我解决了这个问题。

- MichaelEr

Answer 10

所以我通过运行ng serve而不是ng build得到了答案 - 这告诉我哪些源文件实际上包含了问题。

我通过替换以下导入来解决它：

@import '../../../../node_modules/@clr/ui/src/utils/helpers.clarity';
@import '../../../../node_modules/@clr/ui/src/color/utils/colors.clarity';
@import '../../../../node_modules/@clr/ui/src/color/utils/contrast-cache.clarity';
@import '../../../../node_modules/@clr/ui/src/color/utils/helpers.clarity';
@import '../../../../node_modules/@clr/ui/src/utils/variables.clarity';

使用硬编码的值：

$clr-header-height: 2.5rem;
$clr-near-white: #fafafa;
$clr-dark-gray: #565656;
$clr-light-gray: #eee;

- Allan Bowe

---

你正在为你的Clarity应用构建自定义主题吗？ - hippeelee

我明白了。如果你最终要覆盖很多变量，那么按照自定义主题的方式构建可能会更容易。如果你有问题或者遇到困难，请随时联系我。 - hippeelee

这里的动机纯粹是为了在 Angular 更新后获得成功的构建。这是我的下一个问题：https://dev59.com/dbHma4cB1Zd3GeqPKV1n - Allan Bowe