Как добавить компиляцию Sass в Angular CLI 6: angular.json?

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

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

В старой angular-cli.json есть раздел, в котором вы можете установить stylExt так,

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

но я не знаю, где именно это сделать, так как после свойств "test" и "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 который 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 с первым, выкидывающим ошибку, и последний, по-видимому, не влияет на файл, но без ошибок.

Ответы

Ответ 1

Выполняя то, что прокомментировал Smokey Dawson,

"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 в корневом каталоге вашего проекта.

Ответ 2

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

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

И использовать Scss в глобальном масштабе (src/styles.css), тогда вам нужно сменить styles.css на styles.scss (то же самое на меньшее, 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 [email protected]/angular:component.styleext scss

Это обновит angular.json с помощью:

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

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

    defaults: {
        "styleext": "scss"
    }

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

ng new my-project --style=scss

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