Angular Параметры CLI SASS

Я новичок в Angular, и я иду из сообщества Ember. Пытается использовать новый Angular -CLI, основанный на Ember-CLI.

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

Он не работал, но снова не уверен, что я просто что-то неправильно сконфигурировал.

Также, как лучше всего организовать стили в новом проекте Angular 2? Мне было бы неплохо иметь файл sass в той же папке, что и компонент.

Ответ 1

Когда вы создаете свой проект с помощью angular cli, попробуйте следующее:

ng new My_New_Project --style=sass

Это генерирует все ваши компоненты с заранее определенными sass файлами.

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

ng new My_New_Project --style=scss

Если вы изменяете свой существующий стиль в своем проекте

ng set defaults.styleExt scss

Cli обрабатывает остальную часть.

Ответ 2

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

Для новых проектов мы можем установить опции --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

Обновление существующих проектов

Чтобы скомпилировать sass файлы с node-sass angular-cli, мне пришлось запустить

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"
      ],

Ответ 3

Цитата из официальных сообщений 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

Ответ 4

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

ng new My_New_Project --style=scss

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

ng set defaults.styleExt scss

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

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

Ответ 5

Скажите angular -cli, чтобы всегда использовать scss по умолчанию

Чтобы избежать передачи --style scss каждый раз при создании проекта, вы можете настроить свою конфигурацию по умолчанию angular -cli глобально со следующей командой:

ng set --global defaults.styleExt scss

Обратите внимание, что некоторые версии angular -cli содержат ошибку с чтением указанного выше глобального флага (см. Ссылку). Если ваша версия содержит эту ошибку, сгенерируйте ваш проект с помощью:

ng new project --style=scss

Ответ 6

Я заметил очень неприятный прием при переходе к scss файлам!!! Один ДОЛЖЕН перейти от простого:

styleUrls: ['app.component.scss']

до

styleUrls: ['./app.component.scss']

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

Ответ 7

Лучше всего было бы ng new myApp --style=scss

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

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

npm install node-sass --save-dev

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

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

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

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

{
  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 {}

из Angular стартер здесь.