是否可以将SCSS编译为仅在网站（外部CSS）或页面（内部CSS）上使用的CSS？

Question

我通常使用外部 CSS 文件在 Next.js 中构建网站（Next.js 将外部 SCSS 文件编译为 CSS 文件），或者使用外部 CSS 文件在基于静态/CMS 的网站/模块/插件中构建网站（在本例中） Gulp 进行从 SCSS 到 CSS 文件的编译）。

通过这种方法，一个页面甚至整个网站都将在所有页面上包含所有 CSS，无论是否使用，这当然会增加页面大小

我有一个自己创建的“基础”框架，可以包含在我的项目中。我的基本框架将有很多如下所示的样式，因此我可以为特定的浏览器宽度选择我想要的类（移动优先方法）：

.hide { display: none; }
@media (min-width: $vsmall) { .hide-vsmall  { display: none; } }
@media (min-width: $small)  { .hide-small   { display: none; } }
@media (min-width: $medium) { .hide-medium  { display: none; } }
@media (min-width: $large)  { .hide-large   { display: none; } }
@media (min-width: $vlarge) { .hide-vlarge  { display: none; } }

然后我会使用这样的类，它将在我的中断点及以上位置隐藏此内容：

<div class="hide-medium">My content</div>

我有很多像上面这样的样式，所以问题是它会全部包含在所有页面、整个网站上，而我可能只想在一页上使用上述样式之一，

.hide-medium

仅在一页上。所以我不会使用其他的，也不会在其他页面上使用任何，但它们将被编译到外部 CSS 中。

我不必使用外部样式表。这只是因为我是老派，以前人们认为内部和内联样式很糟糕。我认为这可能已经改变，但我不确定，因为我还没有调查过。因此，如果现在内部 CSS 没问题，那么我就可以切换到它。

如果内部CSS没问题，那么仍然存在如何仅将基本SCSS文件中使用的CSS添加到内部页面的问题。

我根本不喜欢使用内联样式，但同样，如果现在可以，并且有一种简单的方法可以做到这一点，那就可以了。

我使用自己的框架的原因之一是因为我只有我知道可以使用的类名。如果我使用 Bootstrap 或类似的文件，我假设它们的基本 CSS 文件将被包含在内，这些文件比我的大得多。但话又说回来，也许现在情况已经改变了。

所以问题是，有没有办法只将整个站点使用的SCSS编译到外部文件或将页面特定的CSS编译到内部（如果认为内部可以的话）？

谢谢

Answer 1

您可以使用 PurifyCSS 或 UnCSS 等工具。

这些工具分析您的 HTML 文件并仅提取正在使用的 CSS 选择器。任何未使用的 CSS 都会被删除。