Как я могу использовать как CSS, так и SASS файлы в Angular 7?

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';