Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No PostCSS config found

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                 }]             }         ]     } }; 
like image 338
Birendra Gurung Avatar asked Apr 07 '18 16:04

Birendra Gurung


People also ask

Do I need PostCSS loader?

It's not required but I do highly recommend the autoprefixer plugin. The loaders allow you to import the specified file types.

What is PostCSS config JS?

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains.

What does PostCSS loader do?

PostCSS-loader is a WP-Loader so you can process CSS with PostCSS inside Webpack. i.e. It loads PostCSS into Webpack.


1 Answers

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

like image 104
Birendra Gurung Avatar answered Sep 28 '22 11:09

Birendra Gurung