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

【问题标题】：Why is @use in my scss files not working in my Angular 9.1.0 project?为什么我的 scss 文件中的 @use 在我的 Angular 9.1.0 项目中不起作用？
【发布时间】：2020-07-14 15:58:04
【问题描述】：

我正在将我的 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？

可以在 here 找到 StackBlitz 示例

【问题讨论】：

我宁愿使用演示应用代码而不是指南
目前还没有我可以使用的演示应用程序。然而，有一个 Stackblitz 模板，但这个模板与我遇到的问题相同。这是我向 repo 报告的问题，但目前我没有工作参考。
这是 github 中代码的演示应用程序：trimox.github.io/angular-mdc-web/#/angular-mdc-web/home stackblitz 似乎与 \@use 指令有问题 - 尝试切换到 \@import
这个问题也出现在我的本地项目中，而不仅仅是在 StackBlitz 上。这个问题似乎是我的全部罪魁祸首，因为我需要使用 \@use 而不是 \@import，如入门指南中所述。
我不明白：@use 在本地不适合你？

标签： angular sass angular-cli mdc-components

【解决方案1】：

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

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

【讨论】：

有什么理由需要升级到 v10？我在很多 cmets 中看到我们应该删除 node-sass，但不确定为什么 Angular 升级会有所帮助。

【解决方案2】：

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

现在通过配置 webpack 有一个解决方法。

【讨论】：

【解决方案3】：

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

【讨论】：