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

问题描述

我在我的项目中使用了 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 文件运行？

解决方法

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

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/ 此外，请确保安装这些新加载程序。