Storybook CSS Modules 預設 ·

Storybook 預設擴充套件，用於新增CSS Modules功能。

安裝

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建立，並由貢獻者社群維護。