Использование как Sass (Scss), так и Less в проекте Angular 7+
Создать проект и указать препроцессор CSS очень просто.
ng new my-app --style=scss
... --style=sass
... --style=less
Установка значения по умолчанию для существующего проекта
ng config schematics.@schematics/angular:component.styleext scss
... sass
... less
Но что, если я хочу использовать и Sass, и Less?
Это возможно?
Я хотел бы интегрировать как Ng-zorro, который использует Less, так и Clarity, который использует Sass для настройки.
Ответы 2
Установив расширение CSS по умолчанию, вы просто указываете, что должно быть создано при запуске
ng g component test
Тогда компонент будет иметь файл стилей с настроенным вами расширением.
В любом случае, это не означает, что вы не можете использовать оба.
Просто измените расширение сгенерированного файла на .less и адаптируйте ссылку в компоненте.
styleUrls: ['./test.component.less'],
или даже оставить оба файла:
styleUrls: ['./test.component.less', './test.component.scss'],
Итак, теперь у вас есть один из ваших файлов стилей как less.
В конце концов, вы можете смешать в своем проекте все возможные диалекты CSS.
@LppEdd это может быть. Однако также может случиться так, что последний бинарный файл sass был изменен с тех пор, как вы установили @angular/cli. Обычно это другая проблема, возможно, вы не сталкивались с проблемой, потому что вы не использовали sass, и проблема даже не могла появиться
Вы правы, я проверил ваше предложение в свежем проекте, созданном без установки препроцессора.
Возможно, небольшое дополнение: это также работает глобально.
угловой.json:
"architect": {
"build": {
..
"options": {
..
"styles": [
"src/styles.less",
"src/styles.scss"
]
Оба файла будут использоваться независимо от того, какой диалект вы используете.
Спасибо! Таким образом, в Angular уже есть все, что нужно как для Sass, так и для Less. Я бы добавил к вашему ответу, что может потребоваться запуск
npm rebuild node-sassиз-за «отсутствующих привязок»