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

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

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

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

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

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

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

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

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

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

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

ng config --global defaults.styleExt=scss

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

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

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

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

1. изменить с

"schematics": {}

в

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

2. изменить с (в двух местах)

"src/styles.css"

в

"src/styles.scss"

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

Для Angular 6,

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

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

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

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

ng new sassy-project --style=sass

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

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

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

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

В 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

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

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

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

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

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

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

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

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

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

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

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

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

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

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

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