NextJS Integration

There are few steps you need to follow to integrate Stylable in your NextJS project.

1. Create a next.config.js file
2. Use the NextJS webpack 5 future flag
3. Exclude other CSS loaders from loading Stylable (*.st.css) files
4. Add the Stylable plugin to the webpack configuration

Example Configuration:

// next.config.js
const {
  StylableWebpackPlugin,
  applyWebpackConfigStylableExcludes,
} = require("@stylable/webpack-plugin");

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    /* exclude Stylable files from all other loaders */
    applyWebpackConfigStylableExcludes(config);

    /* add the Stylable plugin to the webpack configuration */
    config.plugins.push(
      new StylableWebpackPlugin({
        /* let NextJS handle assets */
        filterAssets: () => false,

        /* output CSS to the correct location */
        filename: "static/css/stylable.[contenthash].css",
      })
    );
    return config;
  },
};

important

The applyWebpackConfigStylableExcludes export and filterAssets flag are available in @stylable/webpack-plugin version 4.2.2 and onwards.