使用webpack进行css错误:模块解析失败

Question

我在项目中使用Webpack。

webpack.config.js:

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

除此之外的一切都很好：

css：

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

错误：

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

有人能告诉我应该在webpack.config.js文件中添加什么来帮助css文件运行吗？

Answer 1

将webpack.config.js文件中的use数组更改为

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

使用此内容将postcss.config文件添加到根文件夹

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

具体按此顺序。

您可以在此处阅读有关postcss-loader的更多信息：https://webpack.js.org/loaders/postcss-loader/此外，请确保安装这些新加载程序。