Webpack postcss loader, какова его цель?

Question

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

На странице GitHub

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

это говорит:

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

Я не понимаю: Итак, PostCSS- это WP-загрузчик для обработки CSS с PostCSS?

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

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

Answer 1

Итак, PostCSS - это WP-загрузчик для обработки CSS с PostCSS?

Нет.

PostCSS-загрузчик является WP-загрузчиком, поэтому вы можете обрабатывать CSS с PostCSS внутри Webpack.

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

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

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

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

Нет. PostCSS - это:

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

Answer 2

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

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

Answer 3

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;
}