javascript - 在 parcel.js 中为部署的网站添加 Autoprefixer 会破坏所有网站样式吗？

Question

我有一个使用 Parcel.js bundler 构建的已部署元素。

应用 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 文档中所述，选择此选项可能会导致已部署/建立的没有自动前缀的网站出现问题。 所以我将我的更改回滚到它的 pre-autoprefixer 状态并没有再次完成所有步骤，但这次我没有启用 grid: autoplace 选项并选择了默认的 grid: true 但是我又遇到了同样的问题。

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

Answer 1

Post-css 带有开箱即用的自动前缀。

Parcel bundler 自带 Post-css 开箱即用。

因此，您唯一需要的包是 package.json 中的 parcel-bundler。额外的软件包安装可能是导致问题的原因。

要正确配置它，请尝试这个示例 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 中为元素添加过渡后，在开发工具中检查和查看样式后显示前缀。