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

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 |

根據這個 ，我可以用ng set defaults.styleExt scss開始處理薩斯文件。

但是，它不會經歷將您現有的.css文件轉換為.scss文件的過程。 您必須手動進行轉換。

可以保留我的css文件並並排導入我需要的sass文件嗎？

先感謝您

Answer 1

如果要在應用程序中支持SASS，請考慮僅用.sass替換css文件的擴展名，該擴展名無需任何進一步的修改即可工作。 這是因為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';