Storybook preset addon to add CSS Modules capabilities
npm install -D storybook-css-modulesNext, update .storybook/main.js to the following:
// .storybook/main.js
module.exports = {
stories: [
// ...
],
addons: [
// Other Storybook addons
"storybook-css-modules", // 👈 The addon registered here
],
};By default this preset configured CSS Modules with this options:
{
"importLoaders": 1,
"modules": {
"localIdentName": "[path][name]__[local]--[hash:base64:5]"
}
}If you need specific different options, override this in .storybook/main.js using cssModulesLoaderOptions, example:
// .storybook/main.js
const { getLocalIdentName } = require("css-loader-shorter-classnames");
const getLocalIdent = getLocalIdentName();
module.exports = {
stories: [
// ...
],
addons: [
// Other Storybook addons
{
name: "storybook-css-modules",
options: {
cssModulesLoaderOptions: {
importLoaders: 1,
modules: {
getLocalIdent,
},
},
},
},
],
};