如何在storybook 6中使用css模块化。

Question

我的css模块在Storybook中无法正常工作。没有任何错误，只是无法工作。我不明白问题出在哪里。这是storybook渲染按钮的图像：

Button.js 文件：

import React from "react";
import PropTypes from "prop-types";
import style from "./styles.module.css";

const Button = ({ type, children }) => (
  <button className={style.button}>{children}</button> 
);

Button.propTypes = {
  children: PropTypes.node.isRequired,
  type: PropTypes.string,
};

Button.defaultProps = {
  children: "primary",
  type: "primary",
};

export default Button;

Button.stories.js文件：

import React from "react";
import Button from "./Button";

export default {
  component: Button,
  title: "Test/Button",
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  children: "xx ",
};

export const Secondary = Template.bind({});
Secondary.args = {
  children: "xx ",
  type: "secundary",
};

styles.module.css文件：

.button {
  background: yellow;
  border: 1px solid var(--colors-transparent);
}

.test {
  background: red;
  color: var(--colors-white);
}

.type-primary {
  background: red;
  color: var(--colors-white);
}

.type-secundary {
  background: rgb(12, 177, 163);
  color: var(--colors-white);
}

package.json文件：

  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/react": "^6.3.12",
    "babel-loader": "^8.2.3",
    "classnames": "^2.3.1",
    "react": "^16.14.0",
    "react-scripts": "^4.0.3"
  }

我尝试了其他选项。

<button className={style["button"]}>{children}</button> 

也许有一些解决方法？

- Byron2017

---

你解决了这个问题吗？ - Slava Zoref

@SlavaZoref 是的，你可以在我的回答中看到链接。 - Byron2017

Answer 1

@Slava Zoref，您可以查看此视频 css-modules storybook 6 ，在第15分52秒处，您可以编写以下代码：

async function supportCssModules(config) {
  // console.log('1=================================')
  // console.log('>>>config', config.module.rules)
  // console.log('1=================================')

  config.module.rules.find(
    (rule) => rule.test.toString() === '/\\.css$/'
  ).exclude = /\.module\.css$/

  config.module.rules.push({
    test: /\.module\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  })

  return config
}

module.exports = {
  stories: [
    '../atomDesign/**/*.stories.@(js|jsx|ts|tsx)',
    // "../ejemplos/**/*.stories.@(js|jsx|ts|tsx)",
    // "../stories/**/*.stories.mdx",
    // "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials', //,'storybook-css-modules-preset',
  ],
  // FIXME: Support CSS Modules for Storybook
  webpackFinal: supportCssModules,
}

- Byron2017

Answer 2

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

- Jamal Eddine Naamani