未找到PostCSS配置。

Question

我正在按照教程学习ReactJS。同时，该教程指导使用webpack编译样式表和JS资源。但是在使用webpack编译文件时，我遇到了样式表无法编译的错误。它显示以下错误：

   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

我按照教程的步骤做了一切，但是这个错误还是一直存在，由于我很新手，所以无法解决。我的webpack配置文件webpack.config.js如下：

    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
                }]
            }
        ]
    }
};

- Birendra Gurung

Answer 1

在根目录下新建名为postcss.config.js的文件，并添加如下代码：module.exports = {};。此内容来源于以下帖子：https://dev59.com/O57ha4cB1Zd3GeqPeiL4#41758053。

- Birendra Gurung

---

将 postcss.config.js 文件与 module.exports = {} 放在同一个文件夹中对我有效。我看到其他帖子中有人将 postcss-loader 依赖项降级到 package.json 中的 1.0.0，但那似乎不起作用。这就是解决方法！谢谢。 - Bert

我也确认这个。 - Carmine Tambascia

2022年确认使用PostCSS v9.0.1。 - Joe Johnston

Answer 2

如果您不想添加另一个文件，只需在webpack配置中添加您的选项即可。

         {
           loader: `postcss-loader`,
           options: {
             options: {},
           }
         },

- kontrollanten

---

然后我收到了“您没有设置任何插件、解析器或字符串化程序”的错误。 - vsync

在 webpack 配置中，具体是 WHERE？ - Cheeso

Answer 3

以下是kontrollanten的答案更详细的片段，以确保正确放置：

module: {
    rules: [
        {
            test: /\.(scss)$/,
            resolve: { extensions: [".scss"], },
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: `postcss-loader`,
                    options: {
                        options: {},
                    }
                },
                'resolve-url-loader?sourceMap',
                'sass-loader?sourceMap',
            ]
        }
    ],
},

- michal.jakubeczy

Answer 4

如果有人遇到了同样的问题，但上述解决方法仍然无法解决问题，请尝试将postcss-loader的版本更新至4.2.0（webpack 4）。这对我来说解决了问题。我的postcss-loader版本是2.0.9，在大量更新其他依赖项后，我正在尝试让storybook正常工作。

- wiltsu

Answer 5

如果您不想添加新的配置文件，可以使用此选项。

         {
            loader: `postcss-loader`,
            options: {
              options: {},
            }
          },

这是同时使用MiniCssExtractPlugin的示例。

module:{
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + '/';
              },
              hmr: process.env.NODE_ENV !== 'production',
            },
          },
          'css-loader',
          {
            loader: `postcss-loader`,
            options: {
              options: {},
            }
          },
          'sass-loader',
        ],
      },
    ],
  },

- Hui Ye

---

几乎完美的解释。只有一个我需要在我的情况下更改（在使用Webpack 4.46中的autoprefixer插件时）{loader：'postcss-loader'，options：{options：{plugins：'autoprefixer'：{} }}}} - Marek G.