Sass math.div 函数在 angular 应用程序中未定义，但在 angular lib 中定义

Question

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

@use "sass:math";

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

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

SCSS 代码math.div在库中工作正常。如果我将 SCSS 代码放入projects/my-lib/src/lib/my-lib.component.scss并运行，ng build my-lib那么该库将成功构建。

但是，例如src/app/app.component.scss，如果我将 SCSS 代码放在 src 文件夹中并运行命令，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函数自 1.33.0 起在 sass 中可用，所以我认为问题在于 angular 应用程序由于某种原因与 angular lib 具有不同的 sass 版本。但我不知道如何修复它。

例如min-height: math.pow(10, 2);在应用程序中工作正常。math.pow 从 1.25.0 开始可用

Answer 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"
}

您可以提高版本并在（控制要安装的软件包）中sass添加值并 在保存后重新运行吗？^1.33.0package.jsondependenciessass-loader12.0.0npm install