如何在 Storybook 6 中使用 css 模块

Question

我的 css 模块无法与 Storybook 一起使用。没有任何错误，只是不起作用。我不明白\xc2\xb4t 出了什么问题。这是 Storybook 如何渲染按钮的图像：

\n

\n

Button.js文件：

\n

import React from "react";\nimport PropTypes from "prop-types";\nimport style from "./styles.module.css";\n\nconst Button = ({ type, children }) => (\n  <button className={style.button}>{children}</button> \n);\n\nButton.propTypes = {\n  children: PropTypes.node.isRequired,\n  type: PropTypes.string,\n};\n\nButton.defaultProps = {\n  children: "primary",\n  type: "primary",\n};\n\nexport default Button;\n

\n

Button.stories.js文件：

\n

import React from "react";\nimport Button from "./Button";\n\nexport default {\n  component: Button,\n  title: "Test/Button",\n};\n\nconst Template = (args) => <Button {...args} />;\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n  children: "xx ",\n};\n\nexport const Secondary = Template.bind({});\nSecondary.args = {\n  children: "xx ",\n  type: "secundary",\n};\n

\n

styles.module.css文件：

\n

.button {\n  background: yellow;\n  border: 1px solid var(--colors-transparent);\n}\n\n.test {\n  background: red;\n  color: var(--colors-white);\n}\n\n.type-primary {\n  background: red;\n  color: var(--colors-white);\n}\n\n.type-secundary {\n  background: rgb(12, 177, 163);\n  color: var(--colors-white);\n}\n

\n

package.json文件：

\n

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

\n

我尝试过这些其他选项

\n

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

\n

也许有一些想法如何解决它？

\n

Answer 1

@Slava Zoref 您可以在 .storybook/main.js 中观看此视频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,
}