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,
},
},
},
},
],
};This Storybook addon automatically imports all ".modules.css" files as CSS Modules using the specified options.
// Button.stories.jsx
import React from "react";
import Button from "./Button.jsx"
import styles from "./Button.modules.css"
export default {
title: "Button",
component: Button,
};
const Template = (args) => <Button {...args}>Button</Button>
export const Default = (args) => <Template {...args} />;
// Story using CSS Modules
export const WithCSSModules = () => (
<Template
{...args}
className={styles.Button} // 👈
/>
);/* Button.module.css */
.Button {
background: #000;
color: #fff;
border: 1px solid #000;
height: 36px;
padding: 5px 10px;
}