Angular-cli от css до scss

135

Я прочитал документацию , в которой говорится, что если я хочу использовать, scssмне нужно выполнить следующую команду:

ng set defaults.styleExt scss

Но когда я это делаю и создаю этот файл, я все равно получаю эту ошибку в консоли:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)
Джейми
источник
1
Это будет работать только для файлов, которые вы создаете с этого момента, я не думаю, что это исправит те, которые у вас уже есть. Если вы git diffувидите, что это изменилось.
jonrsharpe
Но у меня пока нет файлов. Просто хочу переключиться.
Джейми
как у вас еще нет файлов? Если вы создаете новый проект, почему вы его так настраиваете?
jonrsharpe
Просто начиная с angular2. Я пытаюсь во всем разобраться.
Джейми
1
Если вы создаете новый проект, сделайте, ng new whatever --style=scss как показано в документации . Не следуйте инструкциям по настройке существующего проекта, если это не то, что вы делаете!
jonrsharpe

Ответы:

267

Для Angular 6 проверьте официальную документацию

Примечание. Для @angular/cliверсий старше, чем 6.0.0-beta.6используется ng setвместо ng config.

Для существующих проектов

В существующем проекте angular-cli, который был настроен со cssстилями по умолчанию, вам нужно будет сделать несколько вещей:

  1. Измените расширение стиля по умолчанию на scss

Вручную измените .angular-cli.json(Angular 5.x и старше) или angular.json(Angular 6+) или запустите:

ng config defaults.styleExt=scss

если вы получили ошибку: Value cannot be found.используйте команду:

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

(* источник: параметры Angular CLI SASS )

  1. Переименуйте существующие .cssфайлы в .scss(например, styles.css и app / app.component.css)

  2. Направьте CLI, чтобы найти styles.scss

Вручную измените расширения файлов apps[0].stylesвangular.json

  1. Укажите компоненты, чтобы найти новые файлы стилей

Измените styleUrlsв ваших компонентах, чтобы они соответствовали вашим новым именам файлов

Для будущих проектов

Как упомянул @Serginho, вы можете установить расширение стиля при запуске ng newкоманды

ng new your-project-name --style=scss

Если вы хотите установить значение по умолчанию для всех проектов, которые вы создаете в будущем, выполните следующую команду:

ng config --global defaults.styleExt=scss
шик
источник
6
РЕДАКТИРОВАТЬ: Мне просто нужно было обновить конструктор в реальном времени. Он работает правильно
Кристиан Трайна
1
@ angular / cli 1.7.3: изменение defaults.styleExt с cssна scssin .angular-cli.jsonавтоматически создаст файлы scss для каждого нового компонента, сгенерированного в будущем.
SimonHawesome
4
ng set defaults.styleExt scss для существующих проектов
smedasn
9
для angular 6 следуйте этому github.com/angular/angular-cli/wiki/stories-css-preprocessors
hamilton.lima
22
@chovy для последней версии angular cli, в моем случае (6.0.7) используйте эту команду для существующих проектов: ng config schematics.@schematics/angular:component.styleext scss как сказал @ hamilton.lima
Фархан
52

Начиная с ng6, это можно сделать с помощью следующего кода, добавленного angular.jsonна корневом уровне:

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

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
Хосе Ориуэла
источник
У меня schematicsнет корневого уровня, но он вложен в мой проект в angular.json. Должен ли я игнорировать это и вместо этого добавить это на корневой уровень?
mcheah
1
@mcheah, да, мой тоже настроен, и он работает.
Эрик Сойк
Я оставил свой вложенным в проект, и похоже, что он тоже отлично работает, как и к сведению всех, у кого есть тот же вопрос.
mcheah
После обновления до последних версий ng6 мой schematicsтеперь тоже вложен.
Хосе Ориуэла
Похоже, для меня это ничего не меняет. Все еще не обрабатываются правила scss в файлах .css.
chovy
34

Откройте файл angular.json

1. изменить с

"schematics": {}

в

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. изменить с (в двух местах)

"src/styles.css"

в

"src/styles.scss"

затем проверьте и переименуйте все .cssфайлы и обновите файлы styleUrls component.ts из.css to .scss

БАЛА
источник
4
Шаг 1 можно выполнить из интерфейса командной строки: ng config schematics.@schematics/angular:component.styleext scss как указано в официальных документах: github.com/angular/angular-cli/wiki/stories-css-preprocessors
Marian07 01
13

Для Angular 6,

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

примечание: @ schematics / angular - это схема по умолчанию для Angular CLI

Франклин Благочестивый
источник
11

Интеграция препроцессора CSS для Angular CLI: 6.0.3

При создании нового проекта вы также можете указать, какое расширение вы хотите для файлов стилей:

ng new sassy-project --style=sass

Или установите стиль по умолчанию для существующего проекта:

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

Документация Angular CLI для всех основных препроцессоров CSS

Ангел рома
источник
1
Invalid JSON character: "s" at 0:0.
chovy
По угловому CLI 6.0.8 ng config(как указано выше) является лучшим методом , но вам все еще нужно переименовать *.cssфайлы *.scssи заменить ссылки на angular.jsonна style.cssс style.scssи обновить все ссылки на файлы компонентов в styleUrlsсобственности новых имен. ... тогда он отлично работает!
gkl
8

Для существующих проектов :

В angular.jsonфайле

  1. В buildчасти и в testчасти, заменить:

    "styles": ["src/styles.css"], по "styles": ["src/styles.scss"],

  2. Заменить:

    "schematics": {}, по "schematics": { "@schematics/angular:component": { "style": "scss" } },

Использование ng config schematics.@schematics/angular:component.styleext scssкоманды работает, но не помещает конфигурацию в одно и то же место.

В своем проекте переименуйте .cssфайлы в.scss

Для нового проекта всю работу выполняет эта команда:

ng n project-name --style=scss

Для глобальной конфигурации

В новых версиях нет глобальной команды

veben
источник
6

Используйте команду:

ng config schematics.@schematics/angular:component.styleext scss
химаншу шарма
источник
3

В ng6 вам нужно использовать эту команду, согласно аналогичному посту :

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
Джеймсон Сондерс
источник
3

Для пользователей расширений Nrwl, которые сталкиваются с этой веткой : все команды перехватываются Nx (например, ng generate component myCompent), а затем передаются в AngularCLI.

Команда для работы SCSS в рабочей области Nx:

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

Тило
источник
Молодец, искал это. Спасибо!
Руан Петерсен
2

Может быть применено изменение грубой силы. Это можно изменить, но это более длительный процесс.

Перейдите в папку приложения src / app

  1. Откройте этот файл: app.component.ts

  2. Измените этот код styleUrls: ['./app.component.css']наstyleUrls: ['./app.component.scss']

  3. Сохранить и закрыть.

В той же папке src / app

  1. Переименуйте расширение для файла app.component.css в (app.component.scss)

  2. Выполните это изменение для всех остальных компонентов. (например, дом, насчет, контакт и т. д.)

Далее следует файл конфигурации angular.json . Он находится в корне проекта.

  1. Найдите и замените CSS, измените его на (scss) .

  2. Сохранить и закрыть.

Наконец, перезапустите свой ng serve -o.

Если компилятор жалуется на вас, повторите действия еще раз.

Обязательно внимательно следуйте инструкциям в app / src .

Фрэнк Тойни
источник
1

В последней версии Angular (v9) код ниже необходимо добавить angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

Может быть добавлено с помощью следующей команды:

ng config schematics.@schematics/angular:component.style scss
Парта Ранджан
источник
не работает для меня, и я пытаюсь сделать это более 10
Кросс