No PostCSS config found

Question

I am trying to learn reactjs according to a tutorial. Meanwhile the tutorial instructs to use webpack for compiling stylesheets and JS assets. I am stuck in an error where the stylesheets cannot get compiled and throws following error while compiling the file using webpack. It displays following error :

   ERROR in ./src/stylesheets/hello.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/stylesheets/hello.css)
Module build failed: Error: No PostCSS Config found in: E:\developer\start\src\stylesheets
    at E:\developer\start\node_modules\postcss-load-config\index.js:51:26
    at <anonymous>
 @ ./src/stylesheets/hello.css 2:14-124
 @ ./src/lib.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js

I have done everything according to the tutorial but somehow this error persists and couldn't solve this as I am very new to this. My webpack configuration file webpack.config.js is as follows:

    module: {
        rules: [
           {
                test: /\.css$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "postcss-loader" // compiles Sass to CSS
                }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "postcss-loader" // compiles Sass to CSS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            }
        ]
    }
};

score 107 · Accepted Answer · answered Apr 07 '18 at 16:26

107

Made a new file in the root directory named postcss.config.js and added

module.exports = {};

Found this on the following post:

https://stackoverflow.com/a/41758053/5350097

answered Apr 07 '18 at 16:26

Birendra Gurung

2,168
2
16
29

Placing the `postcss.config.js` file with the `module.exports = {}` in the file worked for me. I saw other threads about people downgrading the `postcss-loader` dependency to `1.0.0` in `package.json` but that didn't seem to work. This is the fix! Thanks. – Bert Aug 09 '18 at 21:42
I confirm this as well – Carmine Tambascia Sep 01 '19 at 18:58
confirmed in 2022 with PostCSS v9.0.1 – Joe Johnston Mar 28 '22 at 18:36

score 26 · Answer 2 · answered Jun 02 '18 at 20:59

26

If you don't want to add another file, it's enough to add your options in your webpack config:

         {
           loader: `postcss-loader`,
           options: {
             options: {},
           }
         },

answered Jun 02 '18 at 20:59

kontrollanten

2,649
19
32

2

Then i get: `You did not set any plugins, parser, or stringifier` error – vsync Apr 07 '19 at 14:38
2

WHERE in the webpack config, exactly? – Cheeso Nov 12 '19 at 01:07

score 4 · Answer 3 · answered Mar 26 '20 at 22:12

Here is a bigger snippet of kontrollanten's answer to be sure where exactly to place it:

module: {
    rules: [
        {
            test: /\.(scss)$/,
            resolve: { extensions: [".scss"], },
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: `postcss-loader`,
                    options: {
                        options: {},
                    }
                },
                'resolve-url-loader?sourceMap',
                'sass-loader?sourceMap',
            ]
        }
    ],
},

score 3 · Answer 4 · answered Jul 29 '21 at 12:05

If someone is having the same problem, but the fixes above still does not fix the issue, try updating the version of postcss-loader to 4.2.0 (webpack 4). This fixed the issue for me. My postcss-loader was 2.0.9 and I was trying to get storybook to work after heavily updating other dependencies.

score 1 · Answer 5 · answered Jul 23 '20 at 06:30

you can use this if don't want to add a new config file.

         {
            loader: `postcss-loader`,
            options: {
              options: {},
            }
          },

this is the example of using MiniCssExtractPlugin at the same time.

module:{
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + '/';
              },
              hmr: process.env.NODE_ENV !== 'production',
            },
          },
          'css-loader',
          {
            loader: `postcss-loader`,
            options: {
              options: {},
            }
          },
          'sass-loader',
        ],
      },
    ],
  },

Nearly perfect explanation. Only one thing I have to change in my case (while using autoprefixer plugin in webpack 4.46) `{loader: 'postcss-loader', options: { options: { plugins: 'autoprefixer': {} } } } }` — Marek G., Nov 17 '22 at 21:02

No PostCSS config found

5 Answers5