A plugin for integrating vanilla-extract with webpack.


npm install --save-dev @vanilla-extract/webpack-plugin


Add the plugin to your Webpack configuration, along with any desired plugin configuration.

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin'); module.exports = { plugins: [new VanillaExtractPlugin()] };
You’ll need to ensure you’re handling CSS files in your webpack config.

For example:

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ new VanillaExtractPlugin(), new MiniCssExtractPlugin() ], module: { rules: [ { test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract use: [ MiniCssExtractPlugin.loader, { loader: require.resolve('css-loader'), options: { url: false // Required as image imports should be handled via JS/TS import statements } } ] } ] } };

If you already have css-loader configured, make sure to add exclude: /\.vanilla\.css$/i to that rule’s configuration.


const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin'); module.exports = { plugins: [ new VanillaExtractPlugin({ // configuration }) ] };

The plugin accepts the following as optional configuration:


Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:

  • short identifiers are a 7+ character hash. e.g. hnw5tz3
  • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. myfile_mystyle_hnw5tz3
  • A custom identifier function takes an object parameter with properties hash, filePath, debugId, and packageName, and returns a customized identifier. e.g.
new VanillaExtractPlugin({ identifiers: ({ hash }) => `prefix_${hash}` });

Each integration will set a default value based on the configuration options passed to the bundler.