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 }] } ] } };
It's not required but I do highly recommend the autoprefixer plugin. The loaders allow you to import the specified file types.
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.
PostCSS-loader is a WP-Loader so you can process CSS with PostCSS inside Webpack. i.e. It loads PostCSS into Webpack.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With