Skip to main content

Import CSS stylesheet in JS

Using the css-loader option exportType as css-style-sheet you can import the CSS stylesheets as the instance of the CSSStyleSheet object.

Import a CSS module script and apply it to a document or a shadow root like this:

import sheet from './style.scss?sheet';

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

You can use the ?sheet URL query to import a style file as stylesheets. The query must be configured in the webpack config:

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: './src/index.html',
      },
      js: {
        filename: '[name].[contenthash:8].js',
      },
      css: {
        filename: '[name].[contenthash:8].css',
      },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(s?css)$/,
        oneOf: [
          // Import CSS/SCSS source file as a CSSStyleSheet object
          {
            resourceQuery: /sheet/, // <= the query, e.g. style.scss?sheet
            use: [
              {
                loader: 'css-loader',
                options: {
                  exportType: 'css-style-sheet', // <= define this option
                },
              },
              {
                loader: 'sass-loader',
              },
            ],
          },
          // Import CSS/SCSS source file as a CSS string
          {
            use: [
              'css-loader',
              'sass-loader',
            ],
          }
        ],
      }
    ],
  },
};

Using the universal configuration above you can apply CSS stylesheets in JS and extract CSS into separate file or inject CSS into HTML:

import sheet from './style.scss?sheet'; // import as CSSStyleSheet object
import './style2.scss?inline'; // the extracted CSS will be injected into HTML
import './style3.scss'; // the extracted CSS will be saved into separate output file

// apply stylesheet to document and shadow root
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

This is useful for custom elements and shadow DOM.

More information: