webpack自动添加厂商前缀（postcss-loader的使用）

最新推荐文章于 2025-01-18 23:38:34 发布

原创最新推荐文章于 2025-01-18 23:38:34 发布 · 540 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用webpack结合postcss-loader自动为CSS添加厂商前缀。首先，需要安装相关依赖，并确保loader配置正确。接着，创建postcss.config.js文件并设置配置。由于webpack 4以上版本的建议，避免在webpack配置中直接处理，可以选择在package.json中配置或创建.browserslistrc文件。这两种方法都被验证为有效，文中展示了在Chrome下应用前缀后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装依赖：自动添加厂商前缀需要npm install安装postcss-loader和autoprefixer

二、

      {
        test: /\.(sass|scss)$/,
        use: ['style-loader','css-loader','postcss-loader','sass-loader']
      }

注意loader的顺序不能错！

三、添加postcss.config.js文件，详情见https://webpack.js.org/loaders/postcss-loader/#root

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

老方法是将此文件加上浏览器前缀需求配置，但是在webpack4.0以上版本打包时会提醒不要这样做，而是采用第四步的两种方法。

module.exports = {
  plugins: [
    require('autoprefixer')({
      "browsers": [
        "defaults",
        "not ie < 11",
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ]
  })
  ]
}

四、在package.json中配置

  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

或者可以新建一个 .browserslistrc 文件

defaults,
not ie < 11,
last 2 versions,
> 1%,
iOS 7,
last 3 iOS versions

两种方法亲测都可行，下面是在chrome下的效果图