NextJS Integration
There are few steps you need to follow to integrate Stylable in your NextJS project.
- Create a
next.config.js
file - Use the NextJS webpack 5 future flag
- Exclude other CSS loaders from loading Stylable (*.st.css) files
- 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.