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无法获取自定义的browserslist配置。我在--autoprefixer.browsers中尝试了命令行参数browserslist，package.json部分，但没有任何内容被提取。

我在postcss，postcss-cli和autoprefixer docs的兔子洞里度过了一个小时后找到了这种方法。它基于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配置复杂性： - ）。

希望它有所帮助！

如何使用来自NPM的自动修复器的browserslist

1 个答案: