在parcel.js 中为已部署的网站添加Autoprefixer 破坏了所有网站样式？

Question

我有一个使用 Parcel.js 打包器构建的已部署项目。

应用 CSS Autoprefixer 并重新部署网站后，我网站的几乎所有样式都已损坏。我真的不确定是什么导致了这种情况，不幸的是，对于我遇到的问题，我什至找不到一个类似的问题。

我首先在我的开发依赖项中添加了 Autoprefixer：

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "parcel-bundler": "^1.12.3",
    "postcss-modules": "^1.4.1"
  },

然后我在我的根文件夹中创建了一个 .postcssrc 配置文件，其中包含：（我在站点中使用了相当多的 CSS-Grid 布局，因此有以下配置）

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": "autoplace"
    }
  }
}

我还在根文件夹中为浏览器目标创建了一个 .browserslistrc 配置文件，其中包含：

defaults

我为浏览器目标选择了默认配置，因为它在 Autoprefixer 文档中提到，默认选项包含各种浏览器，而且因为我没有任何特定需求，这似乎是最好的选择。

我已尽力准确描述事件，如果您需要更多信息，请告诉我。

更新：我认为问题是"autoprefixer": { "grid": "autoplace"在 autoprefixer 文档中提到的，选择这个选项可能会导致已经部署/建立的没有 autoprefixer 的网站出现问题。所以我将我的更改回滚到它的 pre-autoprefixer 状态并没有再次完成所有步骤，但是这次我没有启用该grid: autoplace选项并选择了默认值，grid: true但我再次遇到了同样的问题。

我认为这可能与 Parcel 或我在 Parcel 中使用 postcss 的方式有关。

Answer 1

Post-css 带有开箱即用的 autoprefixer。

Parcel bundler 带有开箱即用的 Post-css。

所以你唯一需要的包是你的package.json. 额外的软件包安装可能是导致问题的原因。

要正确配置它，请尝试此示例 postcss 设置，其中至关重要的是autoprefixer对象和overrideBrowserslist数组不为空，或者像这里的其他答案一样，它只是设置为true，这对我不起作用。添加 browserslist （最近更新为overrideBrowserslist）数组使前缀工作：

{
  ...

  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "sass": "^1.25.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "overrideBrowserslist": [
          "> 1%",
          "last 4 versions",
          "ie >= 9"
        ]
      }
    }
  }
}

在向 CSS 中的元素添加过渡后，在检查和查看开发工具中的样式后显示前缀。

Answer 2

只尝试这个：

{  
  "plugins": {
    "autoprefixer": true
  }
}