如何仅内联页面使用的 CSS 而不是加载整个框架？

Question

我有一个使用 Materialise CSS 的页面。除了容器、基本字体样式和以下内容之外，它几乎不使用框架中的任何内容：

<div id="benefits">
  <div class="row">
    <div class="col s12 m12 l6">
      <h2>Neat colors</h2>
      <div>...</div>
    </div>
  </div>
</div>

我可以用 Sass（不熟悉它）或 Webpack（半熟悉它）或其他任何东西来让我只提取页面使用的 CSS 并内联它吗？如果我擅长 CSS，我可能会手动处理它，但事实并非如此。

最终，我想让页面符合 AMP 标准——也许有更好的方法可以完全实现这一点...

Answer 1

原子化 CSS 是一种很好的内联 CSS 技术。

如果您只想使用绝对需要的东西，那么值得一试。

ACSS 依赖 Atomizer 动态生成 Atomic 样式表 来自您在项目中实际使用的 ACSS 类（没有未使用的 样式！），或在配置中预先声明样式 - 由您决定。 ACSS 不固执己见，没有自己的 CSS，并且很好地集成 与您最喜欢的任务运行器一起使用。

Atomic CSS

Answer 2

我认为你需要purgeCSS。它是一个基于 html 文件清除 css 的 webpack 插件