DEV Community

ynwd
ynwd

Posted on • Updated on

How to integrate postcss and webpack

#postcss #webpack #javascript

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

Top comments (0)

Read next

aswani25 profile image

Deploying and Testing Microservices with Cypress

Aswani Kumar -

kishansheth profile image

🔥 I Built a stunning chat app with React 🚀

Kishan Sheth -

dev_michael profile image

Why Do People Really Love These Frameworks: Angular, React, Vue, and Svelte?

Michael Amachree -

adrianbailador profile image

Uploading Images in Next.js (File Uploads, Filestack)

Adrián Bailador -