Angular с использованием scss / sass и css в одном проекте

Если вы видите angular-cli.json, "styles": - это массив. Таким образом, это должно позволить нам добавить несколько файлов стилей в виде массива, разделенного запятыми. Это должно удалить предупреждения.

Однако я считаю, что в вашем приложении лучше использовать похожие стили. Если вы хотите преобразовать все свои файлы в scss / sass, вы можете сделать это следующим образом:

1. Переименуйте файл css в .scss / .sass. Например: my-file.css - my-file.scss.
2. В каждом соответствующем файле .component.ts обновите styleUrls, указав имя файла .scss/.sass. Например: styleUrls: ['my-file.css'] в styleUrls: ['my-file.scss']
3. Измените styles:[ "styles.css"], в angular-cli.json на styles:["styles.scss],, и это должно сработать!

Вы можете узнать больше о sass / scss здесь: Руководство по Sass Lang

1. В случае местного стиля это не рекомендуется. Поскольку обрабатывать оба типа для каждого компонента в angular слишком сложно. Но для глобальный стиль, отложить загрузку CSS или встроенный CSS вы можете выбрать это как вариант.

Для 2. 3. Используйте .scss, если у вас уже есть коды .css. Каждый код .css может быть включен в файлы .scss. Для получения более подробной информации прочтите эта ссылка.

4. Есть хорошие описания в ответе Сурангшу и https://angular.io/guide/component-styles#component-styles и связь в 1.

Переименуйте свои файлы с sass в scss. Scss признан во всем мире, sass - это просто синтаксис другого языка, производного от css. Компиляторы распознают scss.

Используйте эту команду, чтобы изменить расширения вашего проекта

ng set defaults.styleExt=scss

Вручную измените .angular.json:

"styleExt": "scss"

Вы также можете изменить расширения вручную, ничего не происходит.

Если вы используете последнюю версию angular-cli, вы должны использовать ее для изменения css на sass

ng config schematics.@schematics/angular:component.styleext scss

1. Не рекомендуется, но это возможно.
2. Да и поменять его в компонентах.
3. Они подобны. Основное отличие заключается в синтаксисе. В чем разница между SCSS и Sass?
4. У вас должен быть файл для переменных. И какая-то папка для общих стилей / миксинов и прочего многоразового использования.

Я обнаружил, что лучшей процедурой была (Angular 5): сначала клонировать репозиторий U'r.

1. find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;
2. Vscode: find .css replace to .scss
3. npm install to make sure that .css files in the node_modules are not messed up.

И это работало без ЛЮБЫХ ошибок.

ИДТИ!