时间戳

首页 > 解决方案 > 使用 Preact Build 时如何使样式标签与模板 HTML 保持一致？

css - 使用 Preact Build 时如何使样式标签与模板 HTML 保持一致？

问题描述

我正在使用 Preact 3.0。我在模板 index.html 文件中有一些style标签。目的是在构建过程中保留它。例如，

<style id="keep-this-tag">
  some-styles-that-should-not-be-put-in-style.css-file
</style>

标签： csswebpackpreact

解决方案

你需要标签自己留下来吗？

如果是这样，只需使用以下配置，或添加到您现有的：

// preact.config.js

export default (config, env, helpers) => {
    const critters = helpers.getPluginsByName(config, 'Critters')[0];
    if (critters) {
        critters.plugin.options.mergeStylesheets = false;
    }
}

Critters 用于关键的 CSS 内联，默认情况下，它将您的样式标签合并在一起。不过很容易禁用，希望这会有所帮助。

编辑：禁用预渲染后，Critters 将剥离所有 CSS，因为它们都被认为是“未使用的”。要禁用 Critters，您可以使用--no-inline-css标志，即preact build --no-inline-css.

你确实失去了内联，但没有办法绕过它。

推荐阅读