Storybook 6中使用css-modules无报错但样式不生效如何解决？

下面是可落地的排查和修复步骤：

• 第一步：配置Storybook支持CSS Modules
  Storybook 6默认不会自动识别.module.css后缀的CSS Modules文件，需要手动在.storybook/main.js中添加webpack处理规则：

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-essentials"],
  webpackFinal: async (config) => {
    // 找到现有的css处理规则，排除.module.css文件走普通css处理逻辑
    const cssRule = config.module.rules.find(
      (rule) => rule.test.toString() === /\.css$/.toString()
    );
    cssRule.exclude = /\.module\.css$/;

    // 新增针对.module.css的专属处理规则
    config.module.rules.push({
      test: /\.module\.css$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName: "[name]__[local]--[hash:base64:5]",
            },
          },
        },
      ],
    });
    return config;
  },
};

如果运行时报错找不到对应loader，执行npm i style-loader css-loader -D安装依赖即可。

• 第二步：检查自定义CSS变量是否引入
  你样式中使用的--colors-transparent、--colors-white等自定义变量，需要在Storybook全局引入对应的变量定义文件，操作如下：
  在.storybook/preview.js中引入全局样式文件：

// 替换路径为你定义CSS变量的实际文件路径
import '../path/to/your/global.css';
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

• 第三步：补全Button组件的类型样式绑定
  你当前的Button组件只绑定了.button基础类，没有绑定type对应的样式类，你已经安装了classnames依赖，可直接修改Button.js代码如下：

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

const Button = ({ type, children }) => (
  <button className={classNames(style.button, style[`type-${type}`])}>{children}</button> 
);

// 其余propTypes、defaultProps代码保持不变

配置完成后重启Storybook即可生效。

内容的提问来源于stack exchange，提问作者Byron2017