npm - 如何将浏览器列表与 NPM 的自动前缀一起使用

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

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

问题/问题

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

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

Answer 1

我有一个类似的问题，postcss-cli 不会选择自定义浏览器列表配置。我尝试了命令行参数 --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 配置的复杂性:-)。

希望对大家有帮助!