Кутовий-клі від 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'(…)

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

Примітка. Для @angular/cliверсій, старих, ніж 6.0.0-beta.6використання ng setзамість ng config.

Для існуючих проектів

У існуючому проекті angular-cli, який був створений за типовими cssстилями, вам потрібно буде виконати кілька дій:

1. Змініть розширення стилю за замовчуванням на scss

Змініть вручну .angular-cli.json(кутовий 5.x і старший) або angular.json(кутовий 6+) або запустіть:

ng config defaults.styleExt=scss

якщо ви отримаєте помилку: Value cannot be found.використовуйте команду:

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

(* джерело: кутові параметри 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файли та оновіть файли компонент компонента.Ursls від.css to .scss

Для кутових 6,

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

Примітка: @ схема / angular є типовою схемою для кутового CLI

Інтеграція препроцесорів CSS для кутових CLI: 6.0.3

Створюючи новий проект, ви також можете визначити, яке розширення потрібно для файлів стилів:

ng new sassy-project --style=sass

Або встановіть стиль за замовчуванням для існуючого проекту:

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

Кутова документація 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