Sass math.div 函数在 Angular 应用程序中未定义，但在 Angular 库中定义答案

【问题标题】：Sass math.div function is undefined in angular app, but is defined in angular libSass math.div 函数在 Angular 应用程序中未定义，但在 Angular 库中定义
【发布时间】：2021-08-23 17:17:05
【问题描述】：

我需要在我的 Angular 应用程序中使用 Sass math.div 函数。这是我的 SCSS 代码示例：

@use "sass:math";

div {
  min-height: math.div(100, 2);
}

我使用ng new my-application 命令创建了角度应用程序。我还使用ng generate library my-lib 命令在应用程序中创建了一个库。

带有math.div 的SCSS 代码在库中运行良好。如果我将 SCSS 代码放入 projects/my-lib/src/lib/my-lib.component.scss 并运行 ng build my-lib 则库将成功构建。

但是，如果我将 SCSS 代码放在 src 文件夹中，例如 src/app/app.component.scss 并运行命令 ng build，则会出现此错误：

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
  ╷
4 │   min-height: math.div(100, 2);
  │                 ^^^^^^^^^^^^^^^^
  ╵
  src\app\app.component.scss 4:17  root stylesheet

math.div function is available in sass since 1.33.0，所以我认为问题在于 Angular 应用程序由于某种原因与 Angular lib 具有不同的 sass 版本。但我不知道如何解决它。

例如 min-height: math.pow(10, 2); 在应用程序中运行良好。 math.pow is available since 1.25.0

【问题讨论】：

我遇到了类似的问题，这与我的 Node 版本过时有关。只需在命令行中运行 nvm use node（或更新节点）即可将 Node 提升到 Dart sass 期望能够使用 math.div() 的最新版本。

标签： angular sass

【解决方案1】：

在您的 package-lock.json 文件中，您有两个与 sass 相关的组件： sass 本身和sass-loader。它看起来像这样，代表已安装的软件包：

 "sass": {
  "version": "1.22.2",
  "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.2.tgz",
},
"sass-loader": {
  "version": "7.1.0",
  "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz"
}

您能否升级版本并将具有值^1.33.0 的sass 放入package.json（控制要安装的软件包）下dependencies 和sass-loader 下具有值12.0.0 并重新运行@987654331 @保存后。

【讨论】：

package-lock.json 中有 sass 1.27.0 和 sass-loader 10.0.5。我在 package.json 依赖项中添加了 "sass": "^1.33.0", "sass-loader": "12.0.0" 并运行 npm install 但它没有帮助。仍然得到错误未定义的函数。
package-lock.json 中的当前版本是什么？
@angular-devkit/build-angular 有依赖项：sass 1.27.0，sass-loader 10.0.5。在根依赖项中：sass 1.34.1，sass-loader 12.0.0
嗯，手动覆盖 Angular 的依赖项是有问题的做法，但是您可以尝试在 build-angular 下为 sass 和 sass-loader 赋予相同的值
是的，它有帮助。如果我手动更改 package-lock.json 并运行 npm install 则不会出现“未定义函数”错误。我收到另一个错误：“错误：模块构建失败（来自 ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js）：TypeError：this.getOptions 不是函数”。看起来@angular-devkit\build-angular 真的需要这个旧的 sass 版本

【解决方案2】：

将package.json 文件中的sass 包的版本从^1.26.5 更改为^1.32.13 为我解决了这个问题（带有TypeScript 和SSR 的Vue CLI 应用程序）。

此外，更新sass-loader 包（如上面Beka Kalandadze's comment 中所述）导致我的应用程序停止。

【讨论】：

【解决方案3】：

对于我的 angular & scss 项目，将 @use 'sass:math' 更改为 @use 'sass:math' as math; 会有所帮助。

【讨论】：

【解决方案4】：

删除 math.div 调用：

min-height:    math.div(100, 2);

min-height:    (100 / 2); // this solves the problem

【讨论】：

请使用您的评论权限提出澄清问题。
我不是 SCSS 方面的专家，但似乎有一个突破性的变化，并且不推荐使用 / 作为除法，因为它在下一个版本中只是一个分隔符。我不太了解，所以我不能说，但在我看来，建议的答案应该避免sass-lang.com/documentation/breaking-changes/slash-div
这确实已被弃用，math.div 解决了弃用问题，删除它只会将问题转移到未来。