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


329

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

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

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

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


3
Вы можете посмотреть, как он используется в github.com/angular/material2, например, компонент кнопки github.com/angular/material2/tree/master/src/components/button
Günter Zöchbauer

Ответы:


544

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и продолжайте учиться.

Если у вас есть проект angular 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"
    }
}

17
Затем вы можете изменить его на angular.cli.json, в этом файле есть «значения по умолчанию»: {«styleExt»: «css», «prefixInterfaces»: false, «inline»: {«style»: false, «template»: false} Вы можете изменить styleExt
Mertcan Diken

145
ng set defaults.styleExt scss
Sebas

4
не забудьте поменять styleсобственность на scssв.angular-cli.json
ОСТ

3
ng set defaults.styleExt scss --global
Джошуа Дэвид

29
Для Angular 6 установить новый стиль в существующем проектеng config schematics.@schematics/angular:component.styleext scss
Nehal Damania

344

Обновление для 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
    

установить 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
Единственное, что доставило мне неприятности, angular-cli.jsonэто то, что на самом деле .angular-cli.json. Как только я понял это, я отредактировал это, и это работает отлично. Спасибо.
OldTimeGuitarGuy

@OldTimeGuitarGuy Спасибо, что указали на это, недавно названный файл angular-cli.jsonбыл изменен как скрытый файл ( .angular-cli.json) (rc2). Исправлена.
Всех с нетерпением

Если вы переименовываете существующий .cssфайл, вам может потребоваться закрыть и снова открыть его в редакторе, чтобы он правильно распознал синтаксис sass. Это верно даже в последней
версии

1
Для угловых 6 node-sass уже установлен, поэтому устанавливать его не нужно.
уничтожить все

1
У меня такая же настройка, но импорт файлов scss непосредственно в компоненты не работает, а импорт в styles.scss работает нормально. Я использую угловую версию 7+, есть ли ошибка?
Hemant Sankhla

37

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

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

npm install node-sass

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

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


5
Возможно, вы захотите добавить --save-dev, но не знаете, почему его нет в документации, но потеряли его, когда мы выполнили обновление, а затем не могли понять, почему исчезли наши стили
regnar

2
Была проблема, из-за которой также компилировались файлы sass с ведущими символами подчеркивания, но это было исправлено по состоянию на angular-cli 1.0.0-beta.9
Энди Форд

Ссылка была изменена на: github.com/angular/angular-cli/wiki/stories-css-preprocessors
martin

26

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

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

ng set --global defaults.styleExt scss


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

ng new some_project_name --style=scss

Я использую angularCLI v. 1.2.1 (последняя на июль 2017 г.), и у меня есть ошибка, которую вы описали. я выполнил эту команду, и она, по-видимому, отлично работает для новых компонентов по умолчанию, но новые проекты по-прежнему создают app.component.css, если я не укажу--style=scss
Джереми Мориц

21

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

ng new My_New_Project --style=scss 

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

ng set defaults.styleExt scss

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

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


3
ng setне работает с настройками в appsмассиве. Например. ng set apps.prefix blahвыдает «Неожиданный токен b в JSON в позиции 0».
im1dermike

15

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

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


3
это в app.component.ts для тех, кому лень искать :)
embee

5

Лучше всего может быть 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 {}

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


5

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


3

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» angular.json (обычно строка 11):

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


3

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

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

Спасибо, мне было интересно, почему это не сработало, и оказалось, что они переименовали его styleсейчас
Дино

2

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


2

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


1
Для тех, кто борется с этим после 3/10/2019: Angular повторно ввел поддержку sass для angular- cli в 8.0.0-beta.5, и он скоро должен вернуться в основную ветку релиза. Вы можете установить предварительный релиз сnpm install -g @angular/cli@8.0.0-beta.5
mkrl

Интересный. Спасибо за напоминание. Просто из любопытства, вы знаете, почему они вообще отказываются от поддержки?
Просто ученик

По-видимому, команда Angular называла его «более неактуальным» синтаксисом, по крайней мере, это то, что было сказано в этом PR основным членом команды, и не смогли найти дополнительную информацию по этому вопросу.
Mkrl


0

Интеграция препроцессора 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 - схема по умолчанию для углового интерфейса командной строки

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

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


0

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

ng set defaults.styleExt scss

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

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

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

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

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

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


кто-то ответил на это для существующих проектов Angular 6 здесь
padigan

0

Шаг 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


это совершенно не соответствует угловому стандарту, и использование scss - это просто вторичный эффект от использования bulma
netalex
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.