CODEWITHSUNDEEP
webpackpostcsspostcss-loader
LongHike
LongHike

Reputation: 4460

Webpack postcss loader, what's its purpose?

I am trying to find out, what the postcss-loader is good for.

On the github page

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

it says:

Loader for webpack to process CSS with PostCSS

I dont't get that: So, PostCSS is a a WP-Loader to process CSS with PostCSS?

IMHO, that's a circular definition.

So what is PostCSS, is it a CSSLoader? Or, since it's called Post CSS is it a loader to run after some other CSS-loader?

Upvotes: 13

Views: 6409

Answers (3)

AmerllicA
AmerllicA

Reputation: 32592

Actually, it isn't a direct plugin for PostCSS, it works inside Webpack. if you use Webpack in your project for module bundling, then for using PostCSS as CSS Preprocessor you must use postcss-loader and add configs of it.

For example, you can see THIS REPO, in webpack folder, there is two configuration file for development and production environment, open one of them, no different, and search the postcss-loader word in it, see a complete example of this usage.

Upvotes: 2

SynergyChen
SynergyChen

Reputation: 1521

PostCSS: use JavaScript plugin to transform CSS.

PostCSS Loader: process CSS with PostCSS inside Webpack

Example 1

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

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

Example 2:

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

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

/* After */
h1 {
  color: #00ff00;
}

Upvotes: 2

Quentin
Quentin

Reputation: 944296

So, PostCSS is a a WP-Loader to process CSS with PostCSS?

No.

PostCSS-loader is a WP-Loader so you can process CSS with PostCSS inside Webpack.

i.e. It loads PostCSS into Webpack.

IMHO, that's a circular definition

It isn't because PostCSS and PostCSS-loader are different things.

So what is PostCSS, is it a CSSLoader?

No. PostCSS is:

a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Upvotes: 1

Related Questions