Skip to main content

Webpack

The Stylable Webpack integration provides development, build, and bundle capabilities.

Install​

Install the @stylable/webpack-plugin as a dev dependency in your local project.

Using npm:

npm install @stylable/webpack-plugin --save-dev

Using Yarn:

yarn add @stylable/webpack-plugin --dev

Configuration​

In the webpack.config add the StylableWebpackPlugin to setup Stylable:

const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');

// webpack config
{
  plugins: [new StylableWebpackPlugin()],
}

For more information on configuring the @stylable/webpack-plugin, see the readme file.

With another CSS solution​

When coming into a project with an existing Webpack CSS integration, you will need to exclude .st.css files from any other integration.

For example, exclude Stylable from css-loader:

const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');

{
  plugins: [
    new StylableWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /\.st\.css?/, /* exclude stylable files */
        use: ["css-loader"],
      },
    ],
  },
}