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

我正在将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示例
hhxxttxsj 回答:为什么我的scss文件中的@use在我的Angular 9.1.0项目中不起作用?

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

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

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

目前有一种解决方法,可以配置webpack。

,

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

angular.json config

本文链接:https://www.f2er.com/2526449.html

大家都在问