Storybook中引入Tailwind CSS出现style-loader报错该如何解决

报错原因 #

该报错是Storybook默认的Webpack配置未正确加载PostCSS规则，无法处理Tailwind的特殊指令导致的。你现有的postcss.config.js、全局CSS引入、Tailwind基础指令配置均正确，仅需补充Storybook的PostCSS适配配置即可。

适配步骤 #

方案1：适用于Storybook 6.x版本 #

1. 安装Storybook PostCSS处理插件

npm install @storybook/addon-postcss --save-dev

2. 修改.storybook/main.js配置，在addons数组中新增PostCSS插件配置

module.exports = {
  // 保留你原有的stories、其他addons配置不变
  addons: [
    // 原有addons项
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
};

3. 重启Storybook服务即可生效。

方案2：适用于Storybook 7.x及以上版本 #

Storybook 7+已内置PostCSS支持，无需安装额外插件，直接修改.storybook/main.js添加Webpack处理规则即可：

const path = require('path');

module.exports = {
  // 保留你原有的stories、addons等配置不变
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        "style-loader",
        "css-loader",
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

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