在 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 会破坏所有网站样式?的主要内容,如果未能解决你的问题,请参考以下文章
在Windows窗体c ++ / cli程序中为已定义的标识符获取未定义的标识符错误
如何修复在 Parcel.js 中运行的服务器上的“未找到条目”