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'(…)

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

Ответы

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

Открыть файл 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

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

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

ng new sassy-project --style=sass

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

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

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

Ответ 5

Для угловых 6,

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

При создании нового углового проекта:

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