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

Posted

技术标签:

【中文标题】在 parcel.js 中为已部署的网站添加 Autoprefixer 会破坏所有网站样式?【英文标题】:Adding Autoprefixer in parcel.js for deployed website broke all website styles? 【发布时间】: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"
  ,

然后我在我的根文件夹中创建了一个 .postcs-s-rc 配置文件,其中包含: (我在网站的布局中使用了相当多的 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...我刚刚检查过,除了页脚之外的每个部分都删除了所有样式,甚至页脚也不是原来的样子。剩下的就是我应用的通用重置和字体导入。 我还没有解决这个问题,但是我发现文档的一个大块部分解释了如果你在已经建立/部署的网站上使用网格:自动放置选项,事情可能会出错。跨度> 【参考方案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 即可!

【讨论】:

以上是关于在 parcel.js 中为已部署的网站添加 Autoprefixer 会破坏所有网站样式?的主要内容,如果未能解决你的问题,请参考以下文章

是否可以在 Laravel 7+ 中为已创建的表创建迁移?

在Windows窗体c ++ / cli程序中为已定义的标识符获取未定义的标识符错误

如何修复在 Parcel.js 中运行的服务器上的“未找到条目”

如何在 VSTS 中为 Xamarin iOS 和 Android 部署添加快速通道工具

为已部署的 Kubernetes 服务获取 YAML?

我无法在 WordPress 网站中为置顶位置添加边距