7

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

这个库有一个入门指南，以便能够正确实现它。这涉及更改文件“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 示例

4

3 回答 3

1

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

  • 我使用此处记录ng update的工具升级到 Angular 版本 10.0.8
  • 我从我的项目中删除了 node-sass 作为开发依赖项
于 2020-08-28T17:34:13.857 回答
0

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

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

于 2020-04-21T00:05:18.627 回答
0

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

angular.json 配置

于 2020-07-22T16:12:20.170 回答