Question

我混合使用Material和bootswatch会导致编译器错误：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import "~bootswatch/dist/yeti/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/yeti/_bootswatch.scss";
@import '~font-awesome/scss/font-awesome';

错误是：

    ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:4) Unknown word

> 1 | // Yeti 4.3.1
    |    ^
  2 | // Bootswatch
  3 |

根据this，我可以使用ng set defaults.styleExt scss开始处理Sass文件。

但是，它不会经历将现有的.css文件转换为.scss文件的过程。您必须手动进行转换。

可以保留我的css文件并导入我需要的sass文件吗？

提前谢谢

Answer 1

如果您要在应用程序中支持SASS，请考虑仅将css文件的扩展名替换为.sass，该扩展名无需任何进一步的修改即可工作。这是因为SASS是CSS的超集，因此简单的CSS将完全兼容。

编辑：导入的CSS不是您自己的，而是来自外部软件包（例如节点模块）的，那么从导入中删除.css扩展名应该可以解决此问题：

@import '~@angular/material/prebuilt-themes/indigo-pink';
@import "~bootswatch/dist/yeti/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/yeti/_bootswatch.scss";
@import '~font-awesome/scss/font-awesome';

如何在angular 7中同时使用css和sass文件？

1 个答案: