为什么我的 scss 文件中的 @use 在我的 Angular 9.1.0 项目中不起作用？

Question

我正在将我的 Angular 8.2.14 项目更新到 Angular 9.1.0。到目前为止，我已经成功地使用 ng update 将所有文件迁移到最新的 Angular 发行版。但是，要使此更新成功，我还必须更新此项目中使用的库。这些库之一是“用于 Angular的Material Web 组件”（@angular-mdc/web）。

这个库有一个入门指南，以便能够正确实现它。这涉及更改文件“angular.json”以设置以下内容：

"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/"
    ]
},

本入门指南还涉及开始在我的 *.scss 文件中实现 @use 而不是 @import，以便使用的组件具有正确的样式。

然而，问题是这个@use 似乎不起作用。

例如，在入门指南中，示例声明需要将以下内容添加到 style.scss 文件中：

@use './styles/body';

@use '@material/theme' with (
    $primary: #6200ee,
    $secondary: #faab1a,
    $background: #fff,
);

// MDC Typography
@use '@material/typography/mdc-typography';

// MDC Button
@use './styles/button';

// Angular MDC
@use '@angular-mdc/theme/material';

然后在 style/_body.scss 中创建文件时，我应该添加：

// Override user agent body margin for mdc-top-app-bar
body {
  margin: 0;
}

然而，当这样做时，添加到 body 标签的样式在浏览器中根本不会使用或看到。好像编译styles.scss的时候没有用到整个文件。

因此我的问题是：需要调整什么才能在我的 Angular 9.1.0 项目中使用 *.scss 文件中的 @use？

可以在此处找到 StackBlitz 示例

Answer 1

我终于能够解决这个问题了。

• 我使用此处记录的ng update工具升级到 Angular 版本 10.0.8
• 我从我的项目中删除了 node-sass 作为开发依赖项