将 webpack 用于 css 错误：模块解析失败

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?

Answer 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.