Загрузчик Webpack postcss, для чего он нужен?

Я пытаюсь выяснить, для чего полезен postcss-loader.

На странице гитхаба

https://github.com/postcss/postcss-loader

он говорит:

Загрузчик для веб-пакета для обработки CSS с помощью PostCSS

Я не понимаю: значит, PostCSS — это WP-Loader для обработки CSS с помощью PostCSS?

ИМХО, это круговое определение.

Так что же такое PostCSS, это CSSLoader? Или, поскольку он называется Post CSS, это загрузчик, запускаемый после какого-то другого загрузчика CSS?


webpack postcss postcss-loader
person LongHike    schedule 19.03.2018    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Итак, PostCSS — это WP-Loader для обработки CSS с помощью PostCSS?

No.

PostCSS-loader — это WP-Loader, поэтому вы можете обрабатывать CSS с помощью PostCSS внутри Webpack.

то есть загружает PostCSS в Webpack.

ИМХО, это круговое определение

Не потому, что PostCSS и PostCSS-загрузчик — разные вещи.

Так что же такое PostCSS, это CSSLoader?

PostCSS это:

инструмент для преобразования стилей с помощью JS-плагинов. Эти плагины могут анализировать ваш CSS, поддерживать переменные и примеси, транспилировать будущий синтаксис CSS, встроенные изображения и многое другое.

person Quentin    schedule 18.05.2018

arrow_upward
1
arrow_downward

На самом деле, это не прямой плагин для PostCSS, он работает внутри Webpack. если вы используете Webpack в своем проекте для сборки модулей, то для использования PostCSS как CSS Preprocessor вы должны использовать postcss-loader и добавить его конфиги.

Например, вы можете увидеть THIS REPO в webpack, есть два файла конфигурации для среды разработки и рабочей среды, откройте один из них, ничем не отличается, и найдите в нем слово postcss-loader, см. полный пример этого использования.

person AmerllicA    schedule 22.05.2018
comment
репозиторий недоступен через доступ запрещен - person Amirhossein Ebrahimi; 24.07.2021
comment
@AmirhosseinEbrahimi, это общедоступное хранилище, но ваш IP-адрес находится под санкциями США, поэтому используйте VPN, чтобы пройти санкции. - person AmerllicA; 25.07.2021

arrow_upward
0
arrow_downward

PostCSS: используйте плагин JavaScript для преобразования CSS.

Загрузчик PostCSS: обработка CSS с помощью PostCSS внутри Webpack

Пример 1

/* Before */
.example {
  display: flex;
}

/* After */
.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Пример 2:

/* Before */
:root {
  --green: #00ff00;
}

.example {
  color: var(--green);
}

/* After */
h1 {
  color: #00ff00;
}
person SynergyChen    schedule 01.05.2021