Как добавить сборку Sass в Angular CLI 6: angular.json? - PullRequest
Новая
       41

Как добавить сборку Sass в Angular CLI 6: angular.json?

0 голосов
/ 04 мая 2018

Я только что создал новый проект Angular, используя новый Angular CLI 6.0, но мне нужно добавить компиляцию Sass в мой проект. Я знаю, что вы можете установить флаг, когда создаете проект, но мой проект уже создан и работа выполнена.

Новый файл конфигурации, сгенерированный с помощью нового Angular CLI, теперь называется angular.json, а не angular-cli.json. Схема для файла также отличается, с новыми свойствами.

В старом angular-cli.json есть раздел, где вы можете установить stylExt следующим образом: 

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

но я не уверен, куда именно это поместить, поскольку после свойств "test" и "lint" выдается ошибка lint:

Matches multiple schemas when only one must validate.

и строительная продукция:

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

Глядя на документы CLI Я не вижу ничего, что указывало бы, куда поместить "styleExt".

Я видел другие ответы, советующие: ng set defaults.styleExt scss, который бросает get/set have been deprecated in favor of the config command..

Я пытался ng config set defaults.styleExt scss и npm config set defaults.styleExt scss, при этом первый из них выдавал ошибку, а второй, по-видимому, не влиял на файл, но без ошибки.

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

В Angular 6 это проще, чем это. Компиляция обрабатывается автоматически! Как это ? Чтобы использовать scss на уровне компонентов, необходимо указать имя файла с расширением scss (то же самое для less, styl ). И в вашем component.ts вы также измените соответствующий стиль на scss .

Вот скриншот из документа: enter image description here

А чтобы использовать Scss в глобальном масштабе (src / styles.css), вам нужно изменить styles.css на styles.scss (то же самое для less, styl ... и т. Д.). Затем вы переходите на angular.json и заменяете старый styles.css на новое значение styles.scss. Как показано на рисунке ниже:

enter image description here

Вот ссылка на документ для первой части для тех, кто хочет исследовать себя: https://angular.io/guide/component-styles#non-css-style-files

А как насчет настройки, ng-cli, поэтому при создании нового компонента расширение будет по умолчанию scss? Используйте команду ng config следующим образом: 

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

Это обновит angular.json: 

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

Что эквивалентно старому angular-cli.json 

    defaults: {
        "styleext": "scss"
    }

Это для проекта, который уже запущен, но не установлен по умолчанию на scss. Если вы создаете новый проект, используйте параметр --style, чтобы указать это следующим образом: 

ng new my-project --style=scss

И вам не нужно будет использовать команду прецедента, которая является командой config, которая позволяет нам обновить указанное поле в файле angular.json (поскольку оно уже будет установлено).

0 голосов
/ 07 мая 2018

Делая именно то, что Смоки Доусон прокомментировал , 

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

Выше приведен результат. Итак, в вашем приложении, под ключом schematics, добавить ключ @schematics/angular:component с ключом styleext, установленным на scss.

Это должно быть применено к вашему angular.json файлу в корневом каталоге вашего проекта.

...