обновление для угловой 6+

1. Новые Проекты

   , когда создание нового проекта с угловой командной строки, указать в CSS-препроцессора, как

   • использовать синтаксис SCSS

     ng new sassy-project --style=scss
     

   • использовать синтаксис SASS

     ng new sassy-project --style=sass
     

2. обновление существующего проекта

   Set стиль по умолчанию на существующем проекте под управлением

   • использовать синтаксис SCSS

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

   • использовать синтаксис SASS

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

   приведенная выше команда обновит ваш файл рабочей области (угловой.json) с

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

   здесь styleext может быть scss или sass в соответствии с выбор.

---

Оригинальный Ответ (для углового

новые проекты

для новых проектов, мы можем задать параметры --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
  

чтобы установить styleExt по умолчанию в sass

(или)

изменить 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 здесь -

чтобы использовать один просто установить, например

npm install node-sass

и переименовать .css файлы в вашем проекте .СКС или .дерзость. Они будут скомпилированы автоматически. Аргумент параметров 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

Как сказал Mertcan, лучший способ использовать scss-это создать проект с этой опцией:

ng new My_New_Project --style=scss 

Angular-cli также добавляет возможность изменить препроцессор css по умолчанию после создания проекта с помощью команды:

ng set defaults.styleExt scss

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

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

Я заметил, что очень anoying попал в перемещение в файлы scss!!! Нужно двигаться от простого:styleUrls: ['app.component.scss'] до styleUrls: ['./app.component.scss'] (добавить ./) в app.component.ts

что ng делает при создании нового проекта, но, по-видимому, не при создании проекта по умолчанию. Если вы видите устранение ошибок во время сборки ng, проверьте эту проблему. Это заняло у меня всего ~ 1 час.

может быть ng new myApp --style=scss

затем угловой CLI создать любой новый компонент с scss для вас...

обратите внимание, что с помощью scss не работает в браузере, как вы, наверное, знаете.. поэтому нам нужно что-то скомпилировать в css, по этой причине мы можем использовать node-sass, установите его, как показано ниже:

npm install node-sass --save-dev

и вы должны быть хорошо идти!

если вы используете webpack, читайте здесь:

Командная строка внутри папки проекта, где ваш существующий пакет.формат JSON это: npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, найдите "правила:" и добавьте этот объект в список конец массива правил (не забудьте добавить запятую в конец предыдущий объект):

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

затем в компоненте:

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

если вы хотите глобальную поддержку CSS, то на компоненте верхнего уровня (вероятно приложение.деталь.ТС) удалить заключения и включает СКС:

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. добавьте следующее к ключу "schematics" углового.json (обычно строка 11):

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

следующее должно работать в угловом проекте CLI 6. Т. е. если вы получаете:

get / set были осуждены в пользу команды config.

npm install node-sass --save-dev

затем (убедитесь, что вы изменили имя проекта)

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

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

ng config defaultProject

: Если Вы перенесли свой проект с

недопустимый символ JSON: "s" в 0:0

поэтому ручное редактирование angular.json потребуется.

вы хотите, чтобы это выглядело примерно так (принимая во внимание свойство styleex):

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

кажется мне слишком сложной схемой. _(ツ)_/

теперь вам нужно будет пойти и изменить все ваши css / less файлы на scss и обновить любые ссылки в компонентах и т. д., Но вы должны быть хорошо идти.

установите его как глобальное значение по умолчанию

ng set defaults.styleExt=scss --global

интеграция препроцессора CSS Угловой CLI поддерживает все основные препроцессоры CSS:

чтобы использовать эти препроцессоры просто добавьте файл в styleUrls вашего компонента:

@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

Примечание: @schematics / angular является схемой по умолчанию для углового Кли

строки стиля, добавленные в компонент@.массив стилей должен быть записан в CSS, потому что CLI не может применить предварительный процессор к встроенным стилям.

на основе угловой документации https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Я попытался обновить свой проект, чтобы использовать sass с помощью этой команды

ng установить значения по умолчанию.styleExt scss

но у этого

get / set были осуждены в пользу команды config.

• угловой CLI: 6.0.7
• узел: 8.9.0
• ОС: linux x64
• угловые: 6.0.3

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

НГ новый мой-нахальный-приложения-стиль=ССС

но я был бы признателен, если кто-то может поделиться способом обновления существующего проекта, как это было бы неплохо.

Шаг1. Установите пакет bulma с помощью npm

npm install --save bulma

Шаг2. Открытый угловой.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"
 ]
},
...

БУЛМА + УГЛОВОЙ 6