Storybook CSS Modules 预设 ·

用于添加 CSS Modules 功能的 Storybook 预设插件。

安装

npm install -D storybook-css-modules

配置

接下来，将 .storybook/main.js 更新为如下内容

// .storybook/main.js

module.exports = {
  stories: [
    // ...
  ],
  addons: [
    // Other Storybook addons

    "storybook-css-modules", // 👈 The addon registered here
  ],
};

默认情况下，此预设使用以下选项配置了 CSS Modules

{
  "importLoaders": 1,
  "modules": {
    "localIdentName": "[path][name]__[local]--[hash:base64:5]"
  }
}

如果您需要特定的不同选项，可以在 .storybook/main.js 中使用 cssModulesLoaderOptions 进行覆盖，例如

// .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,
          },
        },
      },
    },
  ],
};

使用方法

此 Storybook 插件会使用指定的选项自动将所有 .modules.css 文件作为 CSS Modules 导入。

(ReactJs 代码示例，请在示例中查找您的框架)

// 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;
}

示例

• React
• Preact
• Vue 3

贡献

Storybook CSS Modules 预设是一个开源项目。我们致力于一个完全透明的开发过程，并高度赞赏任何贡献。无论您是帮助我们修复错误、提出新功能、改进文档还是传播消息 - 我们都非常欢迎您成为社区的一员。

请参阅我们的贡献指南和行为准则。

许可证

Storybook CSS Modules 预设根据 MIT 许可证获得许可 — 详情请参阅 LICENSE 文件。

鸣谢

最初由 onWidget 创建，并由贡献者社区维护。