问题标签 [css-purge]

我有一个使用 create-react-app 构建的单页应用程序。我正在使用各种 npm 包，例如antd等reactstrap。有很多未使用的 CSS 和 javascript 正在减慢我的应用程序的速度。我阅读了有关purgeCSS实现的内容以响应删除它们。根据该文件，我无法config/webpack.prod.conf.js在我的申请中找到并且无法继续前进。我可以只使用CLI而不添加任何配置吗？是否有任何类似且可靠的 npm 包来做同样的事情。

我尝试实现第一个答案，我的配置如下：

仍然得到未使用的javascript，如下所示： 我没有弹出，因为它没有在提供的链接中给出。

我有一个使用顺风的网站。我想保持 css 的大小很小，所以我决定使用 purgecss。我正在用 python 构建静态站点，所以我想使用 CLI。这是我的 Makefile 中处理此问题的代码。

事情是这样的；它似乎使 css 文件更小，但purgecss似乎完全跳过了任何有冒号的类（如sm:grid-cols-2）。拿这个 html 片段：

这是网站的样子。

这是该网站的外观。

grid-cols-1当lg:grid-cols-4类应该被触发时，网格会切换到。查看public/style.cssI 还可以确认lg:grid-cols-4该类未列出。

我调用purgecss-command 错误吗？感觉就像我错过了什么。

我正在尝试找到一种在顺风中使用我动态生成的调色板的方法。我已经使用@adobe/leonardo并style-dictionary生成了我的调色板，它构建了这样的东西：

基本上，这个调色板概念是在明暗模式下使用具有相同对比度的蓝色，但在浅色调色板中使用white颜色基础和深色调色板与black颜色基础。

我找到了一个解决方法：

所以在我的tailwind配置中：

优点：

• 我可以以更好的暗模式方式使用选择器类blue-03 dark:blue-04，这要归功于@adobe/leonardo

缺点：

• 我无法自动从中删除未使用的颜色vars.css，或者我不知道是否有办法在里面tailwind

这对于 10 种颜色的调色板大小来说不是问题，但由于我工作的公司规模庞大，（我们有 100 多个编辑网站，40 多个软件产品）我有一个巨大的集中调色板，也因为在很多情况下这些产品是相关的。

我知道 Tailwind 使用的 PurgeCSS 支持variables应该删除未使用的变量的选项，但 Tailwind 中的 PurgeCSS 选项是不同的。

顺风选项：

PurgeCSS 选项：

是否存在某种方法可以直接从 Tailwind 配置中删除未使用的变量并避免在我的构建中添加 PurgeCSS 层？

In my current NextJS project, I am using Tailwind as a CSS framework. When I run yarn dev, everything works fine, but whenever I run yarn build followed by a yarn start, all of my CSS seems to be purged as the layout of my page is completely different.

Before:

After:

My tailwind.config.js file:

postcss.config.js file:

_app.tsx:

globals.css:

package.json dependencies:

If there is anything that seems off, feel free to let me know. I have looked at other issues online but did not find and solution to my problem.

我正在使用 Laravel Mix 和包含在 Wordpress 主题中的 Tailwind CSS。

我顺风配置的一部分：

PurgeCss 适用于主题文件夹和我添加的路径中的所有文件，但我如何获得我在内容 aka gutenberg 块中使用的类？
我得到了 5-10 页的内容，每一页都在里面使用了顺风类。

我需要将每个内容的内容保存到清除模板中还是有办法自动完成？

谢谢

如果您在一个 NX 工作区中有多个应用程序并且您使用的是 TaiwindCSS，那么您的构建可能会很慢，或者在启用清除时构建会卡住。

从 Angular 11.2 开始，Tailwindcss 现在可以开箱即用了。但对我来说，清除仍然不顺利，也许这可能是 NX Workspace 问题。我花了几个小时来解决这个问题。

我似乎无法让 PurgeCSS 将我在 CMS 中动态使用的类列入白名单。

这是我的配置文件：

尝试了我找到的各种解决方案，但似乎没有任何效果，它不断清除我添加到白名单中的类。有什么建议吗？

我正在尝试使用 purgecss 删除任何未使用的 css，尤其是 Bootstrap 中未使用的 css。使用 Purgecss 设置，我的所有 css 都被删除，只剩下内联样式。这意味着 purgecss 正在删除所有 css 类的样式，而不仅仅是那些没有被使用的。我想让我的配置正确，以便只删除未使用的 css 样式。

由于我的 React App 也使用 Post-css，因此我正在尝试使用该postcss-purgecss插件，并按照该链接中的说明进行设置。

这发生在开发和生产模式中。

你可以在这个 github repo 的这个分支上测试这个问题

您可以在此网址https://purge-css-failing.netlify.app/查看发生的事情的结果

postcss.config.js

webpack.config.js

当我运行npm run dev它时，它会显示我的 TailwindUI 组件的正确输出：

但是当我运行时npm run prod，它不再识别所有颜色。

怎么了？

这是我的配置tailwind.config.js：

和webpack.mix.js：

PostCSS 选项可能有问题，但是什么？该视图位于resources/js/views/Dashboard.vue.

看到 Vuetify 在使用带有 nuxt@vuetify-module 的图标：'mdi' 时添加了大约 300-340kb 的图标，我发现答案表明 purgeCSS 是去除不必要和未使用图标的好方法。

我最初从“mdi/font”手动导入图标，但很快意识到这是一个非常无效的解决方案，因为它迫使我不断想出手动将图标添加到组件的解决方案。

我似乎无法让 purgecss 删除图标（这对我来说是最重要的）。

我安装了“@nuxtjs/vuetify”：“^1.11.3”，我安装了“nuxt-purgecss”：“^1.0.0”，我安装了“@mdi/font”：“^5.9.55”，

看着这个答案，我试图创建我的设置 为什么我在视图源中看到 vuetify css？ 他们还在这里讨论： https ://github.com/vuetifyjs/vuetify/issues/7265

然而，这个要求是用原始尺寸提出的，有什么想法吗？我在这里做错了什么？字体显然是从本地提取的，而不是从 CDN 提取的。