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

Question

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

这个库有一个 getting started guide 以便能够正确地实现它。这涉及更改文件 'angular.json' 以设置以下内容：

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

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

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

例如，在入门指南中，示例指出需要将以下内容添加到 styles.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';

然后在 styles/_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 示例 here

Answer 1

它似乎与 sass-loader 有关，如该票证中所述。 https://github.com/webpack-contrib/sass-loader/issues/804

目前通过配置 webpack 有一个解决方法。

Answer 2

我也遇到过同样的问题，但仅限于 _variables.scss。我正在使用它来生成全局使用的 CSS 变量。所以我刚刚将这个文件添加到 angular.json.

Answer 3

终于解决了这个问题

我使用 ng update 工具 as documented here
我从我的项目中删除了 node-sass 作为开发依赖项

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

Why is @use in my scss files not working in my Angular 9.1.0 project?

angular

sass

angular-cli

mdc-components