Я новачок у Angular і походжу з громади Ембер. Спроба використовувати новий Angular-CLI на базі Ember-CLI.

Мені потрібно знати найкращий спосіб впоратися з SASS в новому проекті Angular. Я спробував скористатися ember-cli-sassрепо, щоб побачити, чи він буде відтворюватись, оскільки у ряді основних компонентів Angular-CLI вибігають модулі Ember-CLI.

Це не спрацювало, але знову ж таки не впевнене, чи я щось неправильно сконфігурував.

Крім того, який найкращий спосіб організувати стилі в новому проекті Angular? Було б непогано мати файл sass у тій же папці, що і компонент.

Angular CLI версії 9 (використовується для створення проектів Angular 9) тепер вибирається styleіз схем замість styleext. Використовуйте команду так:
ng config schematics.@schematics/angular:component.style scss
і отриманий angular.json повинен виглядати приблизно так

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

Інші можливі рішення та пояснення:

Щоб створити новий проект з кутовим CLI з підтримкою sass, спробуйте це:

ng new My_New_Project --style=scss 

Ви також можете скористатися --style=sass& якщо ви не знаєте різниці, прочитайте цю коротку та легку статтю, а якщо ви все ще не знаєте, просто перейдіть scssі продовжуйте вчитися.

Якщо у вас є кутовий 5 проект, використовуйте цю команду для оновлення конфігурації для вашого проекту.

ng set defaults.styleExt scss

Для останніх версій

Для Angular 6 встановити новий стиль для існуючого проекту з CLI:

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

Або безпосередньо в angular.json:

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

Оновлення для Angular 6+

1. Нові проекти

   При генерації нового проекту з Angular CLI вкажіть попередній процесор css як

   • Використовуйте синтаксис SCSS

     ng new sassy-project --style=scss
     

   • Використовуйте синтаксис SASS

     ng new sassy-project --style=sass
     

2. Оновлення існуючого проекту

   Встановіть стиль за замовчуванням для існуючого проекту , запустивши

   • Використовуйте синтаксис SCSS

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

   • Використовуйте синтаксис SASS

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

   Наведена вище команда оновить файл робочої області (angular.json) за допомогою

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

   де styleextможе бути scssабо sassза вибором.

Оригінальний відповідь (для кутових <6)

Нові проекти

Для нових проектів ми можемо встановити варіанти --style=sassабо --style=scssвідповідно до бажаного смаку SASS / SCSS

• Використовуйте синтаксис SASS

  ng new project --style=sass 
  

• Використовуйте синтаксис SCSS

  ng new project --style=scss 
  

потім встановіть node-sass,

npm install node-sass --save-dev

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

Щоб зробити angular-cliкомпіляцію файлів sass node-sass, мені довелося запустити,

npm install node-sass --save-dev 

який встановлює node-sass. Тоді

• для синтаксису SASS

  ng set defaults.styleExt sass
  

• для синтаксису SCSS

  ng set defaults.styleExt scss
  

для встановлення sass за замовчуванням styleExt

(або)

зміни styleExtв sassабо scssдля потрібного синтаксису в .angular-cli.json,

• для синтаксису SASS

  "defaults": {
       "styleExt": "sass",
  }
  

• для синтаксису SCSS

  "defaults": {
       "styleExt": "scss",
  }
  

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

що було виправлено зміною ліній .angular-cli.json,

"styles": [
        "styles.css"
      ],

до будь-якого,

• для синтаксису SASS

  "styles": [
          "styles.sass"
        ],
  

• для синтаксису SCSS

  "styles": [
          "styles.scss"
        ],
  

Цитується з чиновників github repo тут -

Для використання, наприклад, просто встановіть

npm install node-sass

і перейменуйте .css файли у вашому проекті на .scss або .sass. Вони будуть складені автоматично. Аргумент параметрів Angular2App має параметри sassCompiler, lessCompiler, stylusCompiler та compassCompiler, які передаються безпосередньо їх відповідним препроцесорам CSS.

Дивіться тут

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Скажіть angular-cli, щоб за умовчанням завжди використовувався scss

Щоб уникнути проходження --style scssкожного разу, коли ви генеруєте проект, ви можете скоригувати конфігурацію за замовчуванням angular-cli у всьому світі за допомогою наступної команди:

ng set --global defaults.styleExt scss

Зверніть увагу, що деякі версії angular-cli містять помилку із читанням вказаного вище глобального прапора ( див. Посилання ). Якщо ваша версія містить цю помилку, створіть проект за допомогою:

ng new some_project_name --style=scss

Як сказав Мерткан, найкращий спосіб використовувати scss - це створити проект із таким варіантом:

ng new My_New_Project --style=scss 

Angular-cli також додає можливість змінити попередній процесор css за замовчуванням після створення проекту за допомогою команди:

ng set defaults.styleExt scss

Для отримання додаткової інформації ви можете подивитися тут їх документацію:

https://github.com/angular/angular-cli

Я помітив дуже неприємну готчу при переході до файлів scss !!! ОДИН ПОВИНЕН перейти від простого: styleUrls: ['app.component.scss']до styleUrls: ['./app.component.scss'](додати ./) вapp.component.ts

Що робить, коли ви генеруєте новий проект, але, здається, не тоді, коли створюється проект за замовчуванням. Якщо ви бачите вирішення помилок під час збирання, перевірте цю проблему. На це пішло лише ~ 1 годину.

Найкраще могло бути ng new myApp --style=scss

Тоді Angular CLI створить для вас будь-який новий компонент з scss ...

Зауважте, що використання scssне працює у веб-переглядачі, як ви, напевно, знаєте .. тому нам потрібне щось для його компіляції css, тому ми можемо використовувати node-sassта встановити його як нижче:

npm install node-sass --save-dev

і вам слід добре піти!

Якщо ви використовуєте веб-пакет, читайте тут:

Командний рядок всередині папки проекту, де знаходиться ваш наявний package.json: npm install node-sass sass-loader raw-loader --save-dev

В webpack.common.js, пошук «правила:" і додати цей об'єкт в кінець масиву правил (не забудьте додати кому в кінці попереднього об'єкта):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Потім у своєму компоненті:

@Component({
  styleUrls: ['./filename.scss'],
})

Якщо ви хочете підтримувати глобальну CSS, тоді на компоненті верхнього рівня (ймовірно, app.component.ts) видаліть інкапсуляцію та включіть SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

від кутового стартера тут .

ng set --global defaults.styleExt=scssзастаріло з ng6. Ви отримаєте це повідомлення:

get / set застаріли на користь команди config

Ви повинні використовувати:

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

Якщо ви хочете націлити на конкретний проект (замініть {project} на ім'я свого проекту):

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

Angular-CLI - це рекомендований метод і є стандартом у спільноті Angular 2+.

Крит новий проект з SCSS

ng new My-New-Project --style=sass

Перетворити існуючий проект (CLI менше v6)

ng set defaults.styleExt scss

(з таким підходом потрібно перейменувати всі .css-файли вручну, не забудьте перейменувати файли компонентів)

Перетворити існуючий проект (CLI більше, ніж v6)

1. перейменувати всі файли CSS у SCSS та оновити компоненти, на які посилається.
2. додайте наступне до ключа "схеми" angular.json (зазвичай рядок 11):

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

Для Angular 9.0 і вище оновіть "schematics":{}об'єкт у файлі angular.json таким чином:

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

Наступне має працювати в кутовому проекті CLI 6. Тобто якщо ви отримуєте:

get / set застаріли на користь команди config.

npm install node-sass --save-dev

Потім ( переконайтеся, що ви змінили назву проекту )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

Щоб отримати назву проекту за замовчуванням, використовуйте:

ng config defaultProject

Однак: Якщо ви перенесли ваш проект з <6 на кутовий 6, є хороший шанс, що конфігурація не буде там. У такому випадку ви можете отримати:

Недійсний символ JSON: "s" при 0: 0

Тому angular.jsonбуде потрібно ручне редагування .

Ви хочете, щоб це виглядало приблизно так (враховуючи властивість styleex):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

Мені це здається занадто складною схемою. ¯_ (ツ) _ / ¯

Тепер вам доведеться перейти і змінити всі ваші файли css / менше, щоб вони були scss, і оновити будь-які посилання на компоненти тощо, але вам слід добре зайти.

Станом на 3.10.2019 Anguar відмовився від підтримки sass. Неважливо, до якого варіанту ви перейшли під --styleчас запуску ng new, ви завжди .scssстворюєте файли. Прикро, що підтримка sass відмовилася без жодних пояснень.

Встановіть його як Global Default

ng set defaults.styleExt=scss --global

Інтеграція CSS Preprocessor Angular CLI підтримує всі основні препроцесори CSS:

Щоб використовувати ці препроцесори, просто додайте файл до стилю вашого компонентаUrls:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

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

ng new sassy-project --style=sass

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

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

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

Рядки стилів, додані до масиву @ Component.styles, повинні бути записані в CSS, оскільки CLI не може застосувати попередній процесор до вбудованих стилів.

На основі кутової документації https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Я намагався оновити свій проект, щоб використовувати sass за допомогою цієї команди

встановити параметри за замовчуванням.styleExt scss

але отримав це

get / set застаріли на користь команди config.

• Кутова CLI: 6.0.7
• Вузол: 8.9.0
• ОС: linux x64
• Кутова: 6.0.3

Тому я видалив свій проект (так як я тільки починав роботу і не мав коду в своєму проекті) і створив новий з початково встановленим sass

нове my-sassy-app --style = scss

Але я вдячний, якщо хтось може поділитися способом оновлення існуючого проекту, як це було б добре.

Крок 1. Встановіть пакет bulma за допомогою npm

npm install --save bulma

Крок2. Відкрийте angular.json та оновіть наступний код

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

Це воно.

Щоб легко відкрити інструменти Bulma, додайте stylePreprocessorOptions до angular.json.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6