Как использовать препроцессоры CSS с угловой 7 - PullRequest
Новая
       44

Как использовать препроцессоры CSS с угловой 7

0 голосов
/ 13 мая 2019

Я новичок в мире препроцессоров. Как их использовать, в частности postcss и lostgrid, с угловым 7.

Я пытаюсь применить этот код в угловых. И, как вы можете видеть, он использует postcss-cssnext и lost-grid . 

@use postcss-cssnext;
@use lost;

@lost flexbox flex;
@lost gutter 0;

//more css code

Как я могу использовать их в своем угловом приложении?

* РЕДАКТИРОВАТЬ *

Вы можете использовать приведенный выше код без предварительной обработки. Я отредактировал код так: https://codepen.io/anon/pen/BeLWeb

1 Ответ

2 голосов
/ 13 мая 2019

Сейчас angular cli не поддерживает создание postcss, поэтому вам нужно написать собственный веб-пакет для его обработки.

Вы должны использовать пакет postcss-loader здесь

и вы должны использовать custom-webpack для этого. Пример можно найти здесь

Альтернативные решения: Angular предоставляет 3 предварительных обработки css, которые вы можете использовать: sass, scss, less, так что вы можете выбрать базу на основе ваших личных предпочтений

Чтобы использовать angular cli с предварительным процессом css, вы можете сгенерировать новый угловой проект cli, используя 

ng new my-app --style=scss

Вы также можете установить флаг --style следующим образом:

  1. - стиль = * 1021 СКС *
  2. - стиль = дерзость
  3. - стиль = меньше

Ниже приведен конфиг в angular.json 

  "projects": {
    "awesome": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

Вы можете в разделе схемы у меня есть опция scss preprocess css, которую вы можете изменить на scss, less или sass

Вы можете прочитать эту статью здесь для получения дополнительной информации

...