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

【问题标题】：Adding Autoprefixer in parcel.js for deployed website broke all website styles?在 parcel.js 中为已部署的网站添加 Autoprefixer 会破坏所有网站样式？
【发布时间】：2019-10-07 07:00:55
【问题描述】：

我有一个使用 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 文档中提到的"autoprefixer": { "grid": "autoplace"，选择此选项可能会导致已经部署/建立的没有自动前缀的网站出现问题。所以我回滚了我对它的 pre-autoprefixer 状态的更改，但这次我没有启用grid: autoplace 选项，而是选择了默认的grid: true，但我又遇到了同样的问题。

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

【问题讨论】：

如果你能弄清楚你的 CSS 发生了什么变化，它可能会有所帮助。
嗯，我的 dist 文件夹中的缩小 css 输出文件非常难以阅读，但我可以看到前缀，因为之前我没有。这是一场灾难！几乎所有的样式都被破坏了，所有的边距、填充、位置等。甚至背景颜色等等。
您可以在开发工具中检查 CSS 错误，如果您还没有的话。
@Fee-fi-fo-fum...我刚刚检查过，除了页脚之外的每个部分都删除了所有样式，甚至页脚也不是原来的样子。剩下的就是我应用的通用重置和字体导入。
我还没有解决这个问题，但是我发现文档的一个大块部分解释了如果你在已经建立/部署的网站上使用网格：自动放置选项，事情可能会出错。跨度>

标签： javascript css postcss autoprefixer parceljs

【解决方案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 中向元素添加过渡后，前缀会在开发工具中检查和查看样式后显示。

【讨论】：

干杯，只是要修正一个错字，它是“ie >= 9”而不是“ie => 9”。
@Olivier 感谢您的收获。最近箭头函数太多了:)
避免大量手动配置麻烦的好方法。

【解决方案2】：

只用这个试试：

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

【讨论】：

【解决方案3】：

我遇到了同样的问题。实际上，在我检查了 css 之后，我的类在最后用哈希重命名了。

这里描述了这些问题：https://github.com/parcel-bundler/parcel/issues/644

这是由参数modules: true引起的。将其设置为 false 即可！

【讨论】：