如何将 browserslist 与 NPM 的 autoprefixer 一起使用

Question

设置

我有package.json以下内容：

  ...
  "scripts": {
    ...
    "prefix-css": "postcss build/resources/main/css/EverythingDay.css --use autoprefixer -b \"last 1 chrome versions\" -o build/resources/main/css/EverythingDay_prefixed.css",
    ...
  },
  "devDependencies": {
    ...
    "autoprefixer": "^6.7.7",
    "postcss-cli": "^3.2.0"
  },
  "browserslist": [
    "last 1 chrome versions"
  ],
  ...

我想要的是

我想在我的主 css 文件上使用 postcss 的 autoprefixer 插件，并且我希望它能够被browserslist考虑在内。它似乎是浏览器的默认列表。

据我了解，您应该browserslist向您的 中添加一个条目package.json，以便多个工具（如 autoprefixer 和 babel）可以将其考虑在内。

问题/问题

css 文件确实有前缀，但它autoprefixer不使用浏览器列表。既不是来自-b也不是"browserslist"。

我究竟做错了什么？我更喜欢这个"browserslist"解决方案，因为这似乎是“正确”的方式

Answer 1

我遇到了类似的问题，postcss-cli无法选择自定义浏览器列表配置。我尝试了命令行参数--autoprefixer.browsers（ 中的一个browserslist部分）package.json，但没有任何结果。

postcss我在、postcss-cli和文档的兔子洞里花了一个小时后发现了这种方法autoprefixer。它基于postcss-6.0.13与autoprefixer-7.1.5. 不确定它是否适用于您使用不同软件包版本和所有版本的情况，但这里是：

• 将配置文件添加到您的项目中，其中包含 post css 插件的配置值：

postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: { 
            browsers: [
                "ie 10",
                "> 1%"
            ]
        }
    }
}

• 告诉postcss通过 --config 参数使用此配置文件（没有其他参数）：

包.json

"scripts": {
    "prefix-css": "postcss --config postcss.config.js -o style.css",
}

起初，我将--use autoprefixerstill 与配置一起放在命令中。也许这会将其恢复为默认值。这种方式似乎有效，它使我能够很好地隐藏 postcss 配置的复杂性:-)。

希望它能帮助别人！