Rails6 - PurgeCSS 忽略来自 image_pack_tag 的样式

Posted 2023-03-07

【中文标题】Rails6 - PurgeCSS 忽略来自 image_pack_tag 的样式

【英文标题】：Rails6 - PurgeCSS ignores styles from image_pack_tag

【发布时间】：2020-06-26 08:37:57

【问题描述】：

我正在关注 TailwindCSS 截屏视频，并在进行过程中对其进行轨道化。

我已取消注释 a/j/p/application.js 中的 image_pack 行：

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

并且可以使用 erb 文件中的 image_pack_tag 从 a/j/images/ 成功拉取图像。

但是，当我在结果文件上使用 purgecss 时，purgecss 不会保留 css 类需要正确设置图像样式。

例如，静态图片链接有效：

<img src="/images/beach-work.jpg" class="mt-6 rounded-lg shadow-xl">

但是当通过 image_pack_tag 访问时：

<%= image_pack_tag "beach-work.jpg", class: "mt-6 rounded-lg shadow-xl" %>

不保留样式。

我应该如何解决这个问题？

【参考方案1】：

你可以做一些事情：

将 purgecss 选项中的类列入白名单

whitelist: [
  'mt-6',
  'rounded-lg',
  'shadow-xl'
]

添加已注释掉的静态代码版本。这对我来说很有效，你的例子的 erb 应该是：

<%# <img src="" class="mt-6 rounded-lg shadow-xl"> %>