DEV Community

ynwd
ynwd

Posted on • Edited 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

dev007777 profile image

Python beats Javascript, Next.js Leap & the AI Coding Wars

TheDev -

dionarodrigues profile image

From useEffect to React Query: Modernizing your data management in react

Diona Rodrigues -

chipm0nk profile image

From Concept to Code: Building a Simple Endless Runner Game

Chipm0nk -

gleamso profile image

The No-Fluff Guide to OpenGraph Images That Actually Work 🎯

gleamso -