问题标签 [css-purge]

我有一个项目设置，其中网站页面由

• Tailwind CSS 并webpack.mix.js使用 purgeCSS 删除未使用的css.

现在，我必须使用vue和在同一网站中构建该部分vuetify。当我开发我在本地开发的模块和命令之一时，一切正常

npm run watch(mix watch -- --watch-options-poll=1000)

webpack.mix.js文件如下所示：

当我为网站提供服务时，npm run prod(mix --production)我使用的所有样式vuetify都被破坏了。我相信这是因为在 中mix production，我们正在使用purgeCSS并且purgeCSS无法确定vuetify类，因此将它们删除。

有人遇到过这种情况吗？

npm run prod结果如下所示：

如下npm run watch所示：

PS：我尝试了各种方法，也尝试了配置vue.config.js，但没有任何效果，我需要清除 CSSvuetify和tailwind

Next.js + PurgeCss

我有一个旋转木马库，它在清除时删除了它的 CSS。我假设它用于在页面上应用 css 的 javascript 发生预清除安全列表检查，然后 purgecss 将其全部删除 - 所以它不会出现在生产版本中。

_app.js

这是我的 post.config.js

关于我还能做些什么来完成这项工作的任何想法？

我的目标是消除网站上的渲染阻塞 CSS 和 JS。

Google 建议通过覆盖来识别使用的 CSS/JS，并将该代码从阻止渲染的 URL 移动到 HTML 页面中的内联脚本标记。当页面加载时，它将拥有处理页面核心功能所需的东西。

例如对于核心 CSS：

然后可以通过预加载异步加载 CSS 的其余部分。

我遇到了可以删除未使用的 css 的 Purgecss。

purgecss --css bootstrap-grid.min.css --content index.html --out dist/

但我更愿意提取未使用的 CSS，以便通过如上所述的预加载异步加载它们，以避免网站本身出现任何问题。

请问如何使用 Purgecss 或任何其他工具来实现这一点？

javascript也是如此。核心可以这样加载：

虽然可以像这样异步加载非关键部分：

但是有没有一种工具可以从我的网站中提取未使用的 JS 呢？

谢谢

我在我的 Rails 应用程序和我的开发服务器上设计了一个漂亮的顺风页面，它看起来很棒。但是当我把它推到 Heroku 时，很多类都消失了。任何使用屏幕宽度标签 (lg:w-1/4) 的东西都不起作用。我在开发中有一个漂亮的渐变，但在 Heroku 上没有（bg-gradient-to-r from-green-300 via-blue-500 to-purple-600）。没有任何代码是动态调用的。我的顺风配置正在使用清除，但文件位置被调出

我也觉得当我对顺风配置或帖子配置进行更改时，在重新推动之后，我对heroku 所做的一切都不重要。我设置了 purge: false 并没有什么不同。以下是差异的图像。当我比较生产和开发中的 css 文件时，生产肯定缺少类，但我不知道如何让 heroku 重新扫描并查看需要添加的顺风类。提前致谢！

在 VueJS 和 Webpack 5 中使用 CSS 模块时，所有类都从 CSS 包中删除。

在 css-loader 的选项中，如果我有 modules: true CSS 包是完全空的。

如果我将其注释掉，则 CSS 包与预期的一样，删除了所有未使用的类，但是 JS 包不再具有组件元素上的 CSS 类。

如果我将 SCSS 文件添加到条目中并且不使用 CSS 模块，则 CSS 包也是正确的。

问题似乎出在组合模块时：true 和 purgecss。

版本：

"webpack": "^5.26.1"

"postcss-loader": "^5.2.0"

"postcss-preset-env": "^6.7.1"

这是我的 Webpack 配置：