Угловые варианты CLI SASS

Question

Угловые варианты CLI SASS

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

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

Это не сработало, но, опять же, я не уверен, что что-то неправильно настроил.

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

366

angular sass angular-cli

Источник

user2109585 25 мар '16 в 12:48

18 ответов

Решение

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

Новые проекты
При создании нового проекта с Angular CLI укажите препроцессор css как
- Использовать синтаксис SCSS
```
ng new sassy-project --style=scss
```
- Использовать синтаксис SASS
```
ng new sassy-project --style=sass
```
Обновление существующего проекта
Установить стиль по умолчанию для существующего проекта, запустив
- Использовать синтаксис 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
```

установить 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"
      ],

357

Источник

user6342122 09 янв '17 в 04:28

Цитируется из официальных репозиториев Github здесь -

Чтобы использовать один просто установить, например
npm install node-sass
и переименуйте файлы.css в вашем проекте в.scss или.sass. Они будут скомпилированы автоматически. Аргумент параметров Angular2App имеет параметры sassCompiler, lessCompiler, stylusCompiler и compassCompiler, которые передаются непосредственно их соответствующим CSS-препроцессорам.

Посмотреть здесь

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

42

Источник

user4682802 11 май '16 в 22:12

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

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss

28

Источник

user3120193 02 мар '17 в 11:19

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

ng new My_New_Project --style=scss

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

ng set defaults.styleExt scss

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

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

25

Источник

user4059250 17 ноя '16 в 16:22

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

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

17

Источник

user1406616 17 дек '16 в 23:51

Лучше всего может быть 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, найдите "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 {}

от углового стартера здесь.

7

Источник

user5423108 09 июн '17 в 09:03

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"}'

7

Источник

user1248177 29 май '18 в 10:00

Для Angular 9.0 и выше обновите"schematics":{}объект в файле angular.json следующим образом:

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

7

Источник

user8583692 19 мар '20 в 00:07

Angular-CLI является рекомендуемым методом и является стандартом в сообществе Angular 2+.

Создайте новый проект с помощью SCSS

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

Преобразовать существующий проект (CLI меньше v6)

ng set defaults.styleExt scss

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

Преобразовать существующий проект (CLI больше, чем v6)

переименуйте все файлы CSS в SCSS и обновите компоненты, которые на них ссылаются.
добавьте следующее к ключу "schematics" файла angular.json (обычно строка 11):

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

5

Источник

user9263393 08 май '18 в 23:02

По состоянию на 3.10.2009 г. Ангуар прекратил поддержку sass. Не важно, какой вариант вы передали --style при беге ng newвсегда получаешь .scss файлы сгенерированы. Обидно, что нахальная поддержка была отброшена без объяснения причин.

5

Источник

user170931 10 мар '19 в 00:27

Следующее должно работать в угловом проекте 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 и обновить любые ссылки в компонентах и т. Д., Но вы должны быть в порядке.

4

Источник

user2099266 01 июн '18 в 14:45

Для Angular 12 обновите angular.json с помощью:

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

а также:

      "build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

3

Источник

user350105 16 июн '21 в 13:31

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

ng set defaults.styleExt=scss --global

3

Источник

user5193409 12 фев '18 в 11:00

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

ng set defaults.styleExt scss

но получил это

get/set устарела в пользу команды con fig.

Угловой CLI: 6.0.7
Узел: 8.9.0
ОС: Linux x64
Угловой: 6.0.3

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

ng new my-sassy-app --style=scss

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

2

Источник

user4109794 01 июн '18 в 10:19

Интеграция препроцессора CSS Angular 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 - это схема по умолчанию для Angular CLI

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

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

1

Источник

user2170772 04 июн '18 в 15:54

Шаг 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"
 ]
},
...

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

-1

Источник

user4356398 01 сен '18 в 10:40

НЕ ИСПОЛЬЗУЙТЕ ВСТРОЕННУЮ СИСТЕМУ CSS SASS ИЛИ ANGULAR!!

Я не могу подчеркнуть это достаточно. Люди в Angular не понимали основных систем каскадных таблиц стилей, поскольку, когда вы используете обе эти технологии - как с этой настройкой angular.json - компилятор помещает весь ваш CSS в модули Javascript, а затем выплевывает их в заголовок ваших HTML-страниц как встроенных CSS, который нарушает и сбивает с толку каскадные порядки и отключает собственные каскады импорта CSS.

По этой причине я рекомендую вам УДАЛИТЬ ВСЕ СТИЛЬНЫЕ ССЫЛКИ ИЗ "ANGULAR.JSON", а затем добавить их обратно в свой "index.html" вручную в виде таких ссылок:

      <link href="styles/styles.css" rel="stylesheet" />

Теперь у вас есть полностью функционирующая каскадная система CSS, которая полностью кэшируется в вашем браузере после множества обновлений без цирковых трюков с ECMAScripted, экономя огромное количество полосы пропускания, улучшая общее управление CSS в статических файлах и полный контроль над вашим каскадным порядком за вычетом неуклюжего встроенного CSS. внедряется в заголовок всех ваших веб-страниц, что пытается сделать Angular.

SASS даже не нужен, если вы понимаете, как управлять каскадами в базовых файлах CSS. Управление большими сайтами со сложным CSS может быть очень простым для тех, кто пытается изучить каскадные заказы, используя несколько связанных файлов CSS.

-4

Источник

user5555938 22 дек '20 в 02:36

Другие вопросы по тегам angular sass angular-cli

user6265549 02 окт '16 в 11:08 2016-10-02 11:08 · Accepted Answer · 2016-10-02 11:08

Когда вы создаете свой проект с угловым кликом, попробуйте это:

ng new My_New_Project --style=sass

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

Если вы хотите использовать синтаксис scss, создайте свой проект с помощью:

ng new My_New_Project --style=scss

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

ng set defaults.styleExt scss

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

Для последних версий

Для Angular 6 установить новый стиль в существующем проекте с помощью CLI:

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

Или прямо в angular.json:

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

Угловые варианты CLI SASS

18 ответов

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

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

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

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

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

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

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

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