PostCSS 在 Webpack 中不生效怎么办？

端木恩宇提问于 2026-03-12 10:54:20 阅读 6

工具

我按照文档配置了 PostCSS 和 Webpack，但写好的 autoprefixer 根本没起作用，CSS 里还是没有加厂商前缀。

我的 webpack.config.js 里是这么配的：

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

也建了 postcss.config.js 文件：

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

但编译出来的 CSS 还是原样，比如 display: flex 完全没加前缀。是不是 loader 顺序错了？还是插件没装对？

我来解答赞 1 收藏

反馈

1 条解答

令狐婉琳 Lv1

问题在于 autoprefixer 不知道要适配哪些浏览器，得告诉它。

在 postcss.config.js 里直接加上 browsers 配置：

module.exports = {

  plugins: [

    require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'] })

  ]

};

或者在 package.json 里加 browserslist 也行。配完重新编译就应该有前缀了。

2026-03-12 11:04