close
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

output.inlineStyles

  • Type:
type InlineStylesTest =
  | RegExp
  | ((params: { size: number; name: string }) => boolean);

type InlineStyles =
  | boolean
  | InlineStylesTest
  | {
      enable?: boolean | 'auto';
      test: InlineStylesTest;
    };
  • Default: false

Whether to inline output style files (.css files) into HTML with <style> tags.

Note that, with this option on, the style files will no longer be written in dist directory, they will only exist inside the HTML file instead.

Example

By default, we have following output files:

dist/html/main/index.html
dist/static/css/style.css
dist/static/js/main.js

After turn on the output.inlineStyles option:

export default {
  output: {
    inlineStyles: true,
  },
};

The output files of production build will become:

dist/html/main/index.html
dist/static/js/main.js

And dist/static/css/style.css will be inlined in index.html:

<html>
  <head>
    <style>
      /* content of dist/static/css/style.css */
    </style>
  </head>
  <body></body>
</html>
TIP

Setting inlineStyles: true is equivalent to setting inlineStyles.enable to 'auto'. This indicates that inline styles will only be enabled in production mode.

Using RegExp

If you need to inline part of the CSS files, you can set inlineStyles to a regular expression that matches the URL of the CSS file that needs to be inlined.

For example, to inline main.css into HTML, you can add the following configuration:

export default {
  output: {
    inlineStyles: /[\\/]main\.\w+\.css$/,
  },
};
TIP

The production filename includes a hash value by default, such as static/css/main.18a568e5.css. Therefore, in regular expressions, \w+ is used to match the hash.

Using Function

You can also set output.inlineStyles to a function that accepts the following parameters:

  • name: The filename, such as static/css/main.18a568e5.css.
  • size: The file size in bytes.

For example, if we want to inline assets that are smaller than 10kB, we can add the following configuration:

export default {
  output: {
    inlineStyles({ size }) {
      return size < 10 * 1000;
    },
  },
};

Options

enable

  • Type: boolean | 'auto'
  • Default: false

Whether to enable the inline styles feature. If set to 'auto', it will be enabled when the mode is 'production'.

export default {
  output: {
    inlineStyles: {
      enable: 'auto',
      test: /[\\/]main\.\w+\.css$/,
    },
  },
};

test

  • Type: RegExp | ((params: { size: number; name: string }) => boolean)

The regular expression or function to match the CSS files that need to be inlined.

export default {
  output: {
    inlineStyles: {
      enable: true,
      test: /[\\/]main\.\w+\.css$/,
    },
  },
};