Использование scss в качестве таблицы стилей по умолчанию в Angular 6+ (styleExt)
По-видимому, способ объявления расширения таблицы стилей по умолчанию изменился с Angular 6 и далее. Свойство styleExt в angular.json больше не распознается.
Для новых проектов это можно установить с помощью опции в CLI --style=scss в команде new.
Однако как это изменить для существующих проектов, которые я перенес с Angular <5, или если вы забыли это сделать во время создания проекта?
Этот вопрос должен быть строго связан с критическими изменениями, внесенными в версии Angular с 5 по 6.
@ T04435 Я не понимаю, почему это дубликат. Я четко заявляю, что этот вопрос касается конкретного изменения версии в Angular, которое вообще не является частью другого вопроса. Тот факт, что здесь также применимы части пересмотренных ответов, не делает вопросы одинаковыми.
Ответы 2
Позиция, на которой это установлено, изменилась в angular.json. Теперь есть 2 способа установить эту опцию.
Через Angular CLI:
ng config schematics.@schematics/angular:component.styleext scss
Непосредственно в angular.json:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
Обновление Angular 9:
Обратите внимание, что начиная с Angular 9 styleext переименован в style. Итак, мы получаем:
ng config schematics.@schematics/angular:component.style scss
а также
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
Когда я попробовал это, у меня все еще был global styles.css в виде файла css, поэтому я не мог воспользоваться интерпретацией scss. Если я попытался переименовать в styles.scss (и обновил ссылки в angular.json, сборка сломалась.
@MichaelCoxon Параметр шаблона только определяет, какой тип таблицы стилей будет создан для новых компонентов. Это не влияет на существующие. Тем более глобальный styles.css. Не уверен, что вы можете использовать SCSS в этом.
Чтобы использовать глобальный styles.scss, вам нужно изменить ссылку в другом месте angular.json. Посмотрите на projects.project-name.architect.build.styles и projects.project-name.test.styles. Измените значение так, чтобы оно указывало на styles.scss вместо styles.css. Для уже созданного проекта не забудьте изменить фактические файлы.
Как использовать отдельный global.scss в этом, а не style.css "defaultProject": "pareo", "schematics": {"@ schematics / angular: component": {"prefix": "app", "styleext": "scss", "styles": ["src / app / provider-portal / provider-portal.scss"]}, "@ schematics / angular: directive": {"prefix": "app"}}
В соответствии с этим закрытым билетом github.com/ngrx/platform/issues/2248 с новой версией Angular CLI styleExt был заменен на style - я тестировал его в двух библиотеках, которые используют Angular и Angular CLI версии 8.
Чтобы перейти с css на scss для существующего проекта, выполните следующие действия:
В файле angular.json
В детали
buildи в деталиtestзамените:"styles": ["src/styles.css"],от"styles": ["src/styles.scss"],Заменять:
"schematics": {},от"schematics": { "@schematics/angular:component": { "style": "scss" } },
Using
ng config schematics.@schematics/angular:component.styleext scsscommand works but it does not place the configuration in the same place.
В вашем проекте переименуйте ваши файлы .css в .scss
Возможный дубликат Angular-cli от css до scss