it-swarm.com.ru

Angular-Cli от CSS до SCSS

Я прочитал документация , где говорится, что если я хочу использовать 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'(…)

Как это исправить?

94
Jamie

Для 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
  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
148
Chic

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

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

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
41
Jose Orihuela

Открыть angular.json файл

1. Правка из

"schematics": {}

в

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

"src/styles.css"

в

"src/styles.scss"

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

25
BALA

Для Angular 6,

ng config [email protected]/angular:component.styleext scss

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

11
Franklin Pious

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

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

ng new sassy-project --style=sass

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

ng config [email protected]/angular:component.styleext scss

Angular CLI Documentation для всех основных препроцессоров CSS

10
Angel Roma

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

ng config [email protected]/angular:component '{ styleext: "scss"}'
3
Jami Bot

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

ng config [email protected]/angular:component.styleext scss
2
himanshu sharma

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

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

ng config [email protected]/schematics:component.styleext scss 

1
tilo

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

Перейдите в папку приложения 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 .

0
Frank Thoeny