TheLazy.Dev
Portfolio GitHub

Blog

postcss |webpack |javascript

How to integrate postcss and webpack

ynwd

ynwd

Posted on October 16, 2021

How to integrate postcss and webpack

Step by step about how to use postcss & postcss-cli. And then integrate them with webpack from scratch. It will be used when using tailwind.

.
├── package.json
├── postcss.config.js
├── src
│   ├── autocomplete.css
│   ├── base.css
│   ├── index.js
│   └── main.css
└── webpack.config.js
Enter fullscreen mode Exit fullscreen mode

Source code: https://github.com/ynwd/postcss

Create app dir

mkdir postcss && cd postcss
Enter fullscreen mode Exit fullscreen mode

Init package:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Install postcss

npm i -D postcss postcss-cli
Enter fullscreen mode Exit fullscreen mode

Create css file

/* src/main.css */
@import './base.css';
@import './autocomplete.css';
Enter fullscreen mode Exit fullscreen mode 
/* src/base.css */
html {
    color: blue;
  }

select {
  appearance: none;
}
Enter fullscreen mode Exit fullscreen mode 
/* src/autocomplete.css */
.autocomplete {
  color: #777;
}
Enter fullscreen mode Exit fullscreen mode

Run postcss cli

run this to see the available commands

npx postcss --help
Enter fullscreen mode Exit fullscreen mode

compile our existing css files

npx postcss src/main.css
Enter fullscreen mode Exit fullscreen mode

You will see error messages:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Enter fullscreen mode Exit fullscreen mode

PostCSS plugins

Install postcss plugin

npm i postcss-import autoprefixer cssnano -D
Enter fullscreen mode Exit fullscreen mode
  • postcss-import is used to replace @import with actual code.
  • autoprefixer is used to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
  • cssnano is used to ensure that the final result is as small as possible for a production environment.

Create postcss config

module.exports = {
    plugins: [
        require('postcss-import'),
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default',
        }),
    ],
};
Enter fullscreen mode Exit fullscreen mode

Compile

npx postcss src/main.css
Enter fullscreen mode Exit fullscreen mode

It will print

html{color:blue}select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.autocomplete{color:#777}
Enter fullscreen mode Exit fullscreen mode

Add --dist dist to write the out put to the file dist folder

npx postcss src/main.css --dir dist
Enter fullscreen mode Exit fullscreen mode

Webpack integration

Install webpack

npm i webpack webpack-cli -D
Enter fullscreen mode Exit fullscreen mode

Install webpack loader

npm i css-loader mini-css-extract-plugin postcss-loader -D
Enter fullscreen mode Exit fullscreen mode

Create webpack config

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
    mode: "production",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin(),
    ],
}
Enter fullscreen mode Exit fullscreen mode

create entry point

/* src/index.js */
import "./main.css";
Enter fullscreen mode Exit fullscreen mode

compile

npx webpack
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
ynwd
ynwd

Posted on October 16, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to integrate postcss and webpack
postcss How to integrate postcss and webpack

October 16, 2021