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

【问题标题】：how to use browserslist with autoprefixer from NPM如何将 browserslist 与 NPM 中的 autoprefixer 一起使用
【发布时间】：2017-10-19 23:33:50
【问题描述】：

设置

我有一个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。它似乎是默认的浏览器列表。

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

问题/疑问

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

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

【问题讨论】：

标签： npm autoprefixer

【解决方案1】：

我遇到了类似的问题，postcss-cli 不会选择自定义 browserslist 配置。我尝试了命令行参数--autoprefixer.browsers，package.json 中的browserslist 部分，但没有收到任何内容。

我在 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%"
            ]
        }
    }
}

通过 --config 参数告诉postcss 使用此配置文件（仅此而已）：

package.json

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

起初我在命令中还有--use autoprefixer 和配置。也许那是把它扔回默认值。这种方式似乎可以工作，它使我能够很好地隐藏 postcss 配置的复杂性:-)。

希望对某人有所帮助！

【讨论】：