Storybook CSS 模块预设 ·

Storybook 预设附加组件，用于添加CSS 模块功能。

安装

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 模块

{
  "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 模块导入。

(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 模块预设是一个开源项目。我们致力于完全透明的开发过程，并高度赞赏任何贡献。无论您是帮助我们修复错误、提出新功能、改进我们的文档还是传播这个词——我们都希望您成为社区的一员。

请参考我们的贡献指南和行为准则.

许可证

Storybook CSS 模块预设根据 MIT 许可证授权——有关详细信息，请参阅LICENSE文件。

鸣谢

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