How to keep the style tag from template HTML when using Preact Build?-CodePudding

I am using Preact 3.0. I have a few style tags in the template index.html file. The purpose is to it keep it during building. For example,

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

CodePudding user response：

You need the tags themselves to stick around?

If so, just use the following config, or add to your existing:

// preact.config.js

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

Critters is used for critical CSS inlining and, by default, it merges your style tags together. Easily disabled though, hope this helps.

Edit: With prerendering disabled, Critters will strip all CSS, as it's all thought to be "unused". To disable Critters, you can use the --no-inline-css flag, i.e., preact build --no-inline-css.

You do lose out on the inlining, but there's no way around it.