using webpack for css Error:Module parse failed

Question

I'm using Webpack in my project.

webpack.config.js:

moule.exports ={
...
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:"css-loader"}
{loader:"style-loader"}
]
}
...
]}

Everything except this works fine:

css:

pre[class*="language-"]{
background:#f5f2f0
}

error:

Module parse failed:Unexpected token (7:10)
You may need appropriate loader to handle this file type, currently no loaders are configured to process this file. see https://webpack.js.org/concepts#loaders 
*/
> pre[class*="language-"] {
background:#f5f2f0

can someone tell me what should I add in my webpack.config.js file to help the css file run?

Tolumide · Accepted Answer · 2021-04-27 09:36:41Z

1

change the use array in your webpack.config.js file to

use: [
  "style-loader",
  "css-loader",
  "postcss-loader",
  },
]

Add a postcss.config file to your root folder with this content

module.exports = {
    plugins: [require("precss"), require("autoprefixer")],
};

Specifically in this order.

You can read more about postcss-loader here: https://webpack.js.org/loaders/postcss-loader/ Also, ensure you install these new loaders.

edited Apr 27, 2021 at 9:36

answered Apr 26, 2021 at 15:37

Tolumide

9939 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ruty Over a year ago

Thanks for your reply, but I don't know what plugins I have to put on Options at postcss.config.file. using that loader without putting value in Options - do nothing

Tolumide Over a year ago

I updated my comment to include your need to add a postcss.config file. There is more about this on the documentation.

ruty Over a year ago

i followed your instructions and also looked at postcss documintation for other ideas but I'm still getting the same error message

Collectives™ on Stack Overflow

using webpack for css Error:Module parse failed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related