Как добавить компиляцию Sass в Angular CLI 6: angular.json?
Я только что создал новый проект Angular, используя новый Angular CLI 6.0, но мне нужно добавить компиляцию Sass в свой проект. Я знаю, что вы можете установить флаг при создании проекта, но мой проект уже создан, и работа сделана.
Новый файл конфигурации, который создается с помощью нового интерфейса командной строки Angular, теперь называется angular.json, а не angular-cli.json. Схема для файла тоже другая, с новыми свойствами.
В старом angular-cli.json есть раздел, где можно настроить stylExt вот так,
"defaults": {
"styleExt": "scss"
}
но я не уверен, где именно это поместить, поскольку после свойств "test" и "lint" выдает ошибку lint:
Matches multiple schemas when only one must validate.
и строительство производит:
Schema validation failed with the following errors:
Data path "['defaults']" should NOT have additional properties(styleExt).
Глядя на Документы CLI, я не вижу ничего, что указывало бы, куда поставить "styleExt".
Я видел другие советы: ng set defaults.styleExt scss, который выдает get/set have been deprecated in favor of the config command..
Я пробовал ng config set defaults.styleExt scss и npm config set defaults.styleExt scss, первый из которых выдает ошибку, а второй, по-видимому, не влияет на файл, но без ошибок.
@JuvenileSnow Ты знаешь, это неплохая идея, лол. Такие мелочи заставляют меня задуматься, неужели я вообще готов начать приложение.
--style = scss @SmokeyDawson TY, который меня спас!
Ответы 3
Делая именно то, что Смоки Доусон прокомментировал,
"projects": {
"angular-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {...}
}
}
Вышеуказанный результат.
Итак, в вашем приложении под ключом schematics,
добавить ключ @schematics/angular:component
с ключом styleext, установленным на scss.
Это должно быть применено к вашему файлу angular.json в корневом каталоге вашего проекта.
И замените ссылки src/styles.css на src/styles.scss в angular.json
Да, это главное. @Dico, у вас есть ссылка на документацию по теме "schematics" "styletext"?
@Herr_Hansen, это styleext (расширение стиля), а не styletext. github.com/angular/angular-cli/wiki/angular-workspacegithub.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/…
У меня также есть SSR, будет ли этот эффект автоматически во время сборки, или мне нужно настроить конфигурацию сборки webpack для компиляции sass?
У меня уже был флаг в схемах, который мне пришлось удалить, иначе компоненты никогда не генерировали никаких scss или css - это было: "inlineStyle": true, пришлось удалить это
И перезагрузите сервер, когда закончите. Если вы используете ng serve, перезапустите его.
В Angular 6 все намного проще. Компиляция выполняется автоматически! Как это ? Чтобы использовать scss на уровне компонентов, вам нужно назвать файл с расширением scss (то же самое для меньше, стиль). И в вашем component.ts вы также меняете соответствующий стиль на scss.
И чтобы использовать Scss в глобальном масштабе (src / styles.css), вам нужно изменить styles.css на styles.scss (то же самое для less, styl ... и т. д.). Затем вы переходите на angular.json и меняете старый файл styles.css на новое значение styles.scss. Как показано на изображении ниже:
Вот ссылка на документ для первой части для тех, кто хочет изучить себя: https://angular.io/guide/component-styles#non-css-style-files
А как насчет настройки ng-cli, чтобы при создании нового компонента по умолчанию использовалось расширение scss?
Используйте команду ng config следующим образом:
ng config schematics.@schematics/angular:component.styleext scss
Это обновит angular.json с помощью:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
Что эквивалентно старому angular-cli.json
defaults: {
"styleext": "scss"
}
Это для проекта, который уже запущен, но не настроен на scss по умолчанию. Если вы создаете новый проект, используйте опцию --style, чтобы указать это следующим образом:
ng new my-project --style=scss
И вам не нужно будет использовать предыдущую команду, которая является командой config, которая позволяет нам обновлять указанное поле в файле angular.json (потому что оно уже будет установлено).
Но что вы делаете, чтобы увидеть сгенерированный файл css? Нужен ли нам отдельный инструмент?
посмотрите и эту статью blog.angularindepth.com/…
В настоящее время в версии 9.0.6 это немного отличается. Согласно Дико и Смоки Доусон выше, вы должны использовать в своем angular.json следующее:
"projects": {
"angular-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {...}
}
}
Но в более поздних версиях свойство styleext было изменено только на стиль. Источник: Angular Github здесь.
Я бы создал новый проект, используя флаг
--style=scss, а затем просто посмотрел, какangular.jsonнастроен в сгенерированном проекте, а затем скопировалangular.jsonв ваше приложение.