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


я только что создал новый угловой проект, используя новый угловой 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 что бросаетget/set have been deprecated in favor of the config command..

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

2   51   2018-05-04 02:16:38

2 ответа:

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

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

в угловой 6, это проще, чем это. Компиляция обрабатывается автоматически! Как это ? Использовать scss на уровне компонентов вам нужно назвать файл с расширением scss (то же самое для меньше, стиль). И в вашем компонент.ТС изменить соответствующий стиль scss тоже.

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

и использовать Scss в глобальном масштабе (src / styles.css), то вам нужно изменить стили.CSS для стилей.scss (то же самое идет меньше, стиль ...прием.) И тогда вы идете на угловой.json и изменить старые стили.CSS для новых стилей.стоимость СКС. Как показано на рисунке ниже:

enter image description here

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

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

 ng config [email protected]/angular:component.styleext scss

это будет обновить угловой.json с:

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

, который является эквивалентным старому угловые-Кинк.json

    defaults: {
        "styleext": "scss"
    }

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

ng new my-project --style=scss

и вам не придется использовать прецедентную команду, которая является командой конфигурации, которая позволяет нам обновить указанное поле в угловом.JSON-файл (потому что это будет уже установлен).