Tim的资源站

记住哪些浏览器厂商前缀必须用于特定的 CSS 规则以支持各种各样的用户，是很有挑战性的。自动添加前缀解决了这个问题。它可以通过 PostCSS 和 autoprefixer 插件启用。autoprefixer 使用 Can I Use 服务来确定哪些规则应该加前缀，并且可以进一步调整其行为。

设置自动添加

实现自动添加需要对当前配置增加一些少量的规则。首先安装 postcss-loader 和 autoprefixer：

npm install postcss-loader autoprefixer --save-dev

启用自动添加的片段：

webpack.parts.js

exports.autoprefix = () => ({
  loader: "postcss-loader",
  options: {
    plugins: () => [require("autoprefixer")()],
  },
});

如果要使用 CSS 抽取 loader，请按如下方式将其连接起来：

webpack.config.js

const productionConfig = merge([
  parts.extractCSS({
    use: ["css-loader", parts.autoprefix()],
  }),
  ...
]);

要确认设置是否有效，我们必须增加一些需要自动添加前缀的内容。调整CSS：

src/main.css

.pure-button {
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

如果您希望支持一些特定的浏览器，您可以设置 .browserslistrc 文件。很多工具都能够用的上这份文件，包括 autoprefixer。

你可以通过 Stylelint lint CSS 。它的设置方式和上面的 postcss-loader 、autoprefixing 相同。

设置文件如下：

.browserslistrc

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

如果你现在构建应用程序（npm run build）并检查构建的 CSS，你会看到 带有 webkit 前缀的规则被去掉了：

.pure-button {
  border-radius: 1em;
}

autoprefixer 能够删除不必要的规则，并根据浏览器定义添加所需的规则。

总结

自动添加前缀是一种方便的技术，因为它减少了开发 CSS 时所需的工作量。您可以在 .browserslistrc 文件中维护一份需要兼容的浏览器名单。然后，工具可以使用这份名单来生成最佳输出。

回顾一下：

• 可以通过 autoprefixer PostCSS 插件启用自动添加前缀。
• 自动添加前缀根据您的最小浏览器定义增加缺少的 CSS 定义。
• .browserslistrc 是一个标准文件，适用于 autoprefixer 之外的工具。