跟随React教程使用Webpack编译样式时遇No PostCSS Config found错误

嘿，这个错误我太熟了！本质就是PostCSS在你的项目根目录找不到它需要的配置文件，所以编译样式表的时候直接报错卡住了。给你两个简单靠谱的解决办法：

方法1：创建单独的PostCSS配置文件 #

在你的项目根目录（和webpack.config.js同级的目录）新建一个名为postcss.config.js的文件，写上基础的PostCSS配置即可。比如最常用的包含浏览器前缀处理的配置：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

如果你的项目还用到其他PostCSS插件（比如postcss-preset-env），直接把它们添加到plugins数组里就行。

方法2：在Webpack配置里直接配置PostCSS选项 #

要是你不想单独维护PostCSS配置文件，也可以直接在Webpack的loader规则里给postcss-loader添加options参数。比如处理CSS的rules可以写成这样：

module.exports = {
  // 其他Webpack配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')
                // 这里可以添加其他PostCSS插件
              ]
            }
          }
        ]
      }
    ]
  }
};

⚠️ 注意：loader的顺序很关键，postcss-loader必须放在css-loader前面（因为Webpack的loader是从右往左执行的），不然也会出现异常。

做完上面任意一种配置后，重新运行Webpack编译命令，应该就能正常处理你的CSS文件了！

内容的提问来源于stack exchange，提问作者Birendra Gurung