webpack

Installation

yarn add postcss-loader \
         postcss-nested \
         postcss-media-minmax \
         @zeecoder/postcss-container-query --dev
# or
npm install postcss-loader \
            postcss-nested \
            postcss-media-minmax \
            @zeecoder/postcss-container-query --save-dev

Setting up PostCSS

Add the following to a file named .postcssrc in your root directory.

{
  "plugins": {
    "postcss-nested": { "bubble": ["container"] },
    "postcss-media-minmax": {},
    "@zeecoder/postcss-container-query": {}
  }
}

Change the Config

Note that this setup assumes that you'll be importing pcss files.

{
  ...
  module: {
      rules: [
          {
              test: /\.pcss$/,
              use: ['style-loader', 'css-loader', 'postcss-loader'],
          },
      ],
  },
  ...
}

And you're done! 🎉

---

◀️️ Parcel

▶️ Gulp

▶️ React