众里千寻

由于浏览器的原因，很多样式在不同浏览器上都会有一些特殊前缀。我们可以通过 PostCSS 和 autoprefixeropen in new window 插件来实现自动添加前缀. autoprefixer 利用了 Can I Useopen in new window 这个服务来获取各种样式规则对应的前缀信息。

设置自动添加前缀

安装 postcss-loader 和 autoprefixer，

npm add postcss-loader autoprefixer --develop
1

添加配置：

webpack.parts.js

exports.autoprefix = () => ({
  loader: 'postcss-loader',
  options: {
    postcssOptions: { plugins: [require('autoprefixer')()] },
  },
});
1
2
3
4
5
6

webpack.config.js

// const cssLoaders = [parts.tailwind()]
const cssLoaders = [parts.autoprefix(), parts.tailwind()];
1
2

定义需要支持的浏览器列表

autoprefixer 需要一个 browserslistopen in new window 定义来知道需要支持哪些浏览器。

在项目中添加一个 .browserslistrc 文件，autoprefixer 会读取这个文件。

.browserslistrc

> 1% # Browser usage over 1%
Last 2 versions # Or last two versions
IE 8 # Or IE 8
1
2
3

现在执行构建，npm run build, 查看构建输出结果，我们可以看到样式类已经支持了一些老旧浏览器了。

我们可以通过 Stylelintopen in new window 来给样式文件添加 lint 规则。设置方式与 autoprefixer 相同。

总结

自动添加前缀极大的简化了我们的样式开发工作，我们可以通过 .browserslistrc 文件来指定需要支持的浏览器。

我们通过 autoprefixer 这个 PostCSS 插件来实现自动添加前缀。

通过 .browserslistrc 来指定需要支持的浏览器版本。

.browserslistrc 是一个标准文件，除了 autoprefixer 以外，很多其他工具也支持通过这个文件读取支持的浏览器信息。

关注微信公众号，获取最新推送~

加微信，深入交流~