css - 如何从 Twitter Bootstrap 中删除未使用的样式？

Question

我的 Bootstrap 样式表大小约为 120kb。

但我只使用了该样式表代码的 25%。

我不想要那个 span* 类。我通过在 Bootstrap 中自定义它来尝试它 customize page .

我未选中网格系统，但我仍然在表单、表格和响应式布局中看到 span1 - span12 class。

有人可以帮我删除这些代码吗？

Answer 1

在与 grunt 斗争了一个小时之后，我决定尝试 uncss就其本身而言，它要简单得多。如果您只有几页要做，或者不介意手动完成，我建议您这样做。

uncss 页面有完整的说明，但总结一下:

1. 安装了 node.js。
2. npm install -g uncss
3. 从 uncss 复制示例文件页面并将其命名为带有 .js 扩展名的任何名称。我将其命名为 uncss.js。
4. 用您的 html 文件替换文件数组。 (它看起来像 var files = ['my', 'array', 'of', 'HTML', 'files'])
5. 用您的样式表替换样式表数组。 (看起来像 stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'])。如果需要，同样更改“csspath”的值。
6. 运行 node uncss.js(或任何你命名的 uncss 文件)。它将优化后的 CSS 直接输出到命令行，因此将其保存到类似 node uncss.js > mynewcss.css 的文件中。

有很多选项可以定制行为。我忽略了所有这些并且它工作正常，但如果你想要它们，它们就在那里。我测试它的页面从 138kb 到 9kb。