Next.js 13.1.6中Storybook v6.5全局样式失效问题求助

可能的原因及解决方案 #

1. 调整Tailwind的Content扫描范围 #

Tailwind会根据content配置里的文件生成对应的CSS类，如果你的Storybook故事文件（.stories.jsx/tsx等）不在扫描范围内，自定义样式和Tailwind工具类可能无法生成。修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './stories/**/*.{js,ts,jsx,tsx}', // 添加Storybook故事文件路径
    './.storybook/**/*.{js,ts,jsx,tsx}' // 可选，若有预览相关组件
  ],
  darkMode: 'class',
  theme: {
    // ... 你的原有配置
  },
  // ... 其他配置
}

2. 修复Storybook的Webpack配置 #

Next.js的Webpack配置和Storybook默认配置存在差异，需要在.storybook/main.js中手动适配全局CSS的处理：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5'
  },
  webpackFinal: async (config) => {
    // 处理CSS文件，确保全局样式正确加载
    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
      include: /src/
    });

    // 保留原有配置的其他规则
    return config;
  }
};

同时确保安装必要依赖：

npm install style-loader css-loader postcss-loader --save-dev

3. 改用preview-head.html导入全局样式 #

有时候preview.js的导入会因为Next.js的样式隔离机制失效，直接在.storybook/preview-head.html中添加样式链接：

<link rel="stylesheet" href="../src/styles/globals.css">

4. 验证preview.js的导入路径 #

确认preview.js中全局样式的路径是否正确，若Storybook的运行目录和项目根目录不一致，可能导致路径错误。可以尝试使用绝对路径（基于项目根目录）：

// .storybook/preview.js
import '../src/styles/globals.css'; // 或尝试绝对路径：import '/src/styles/globals.css'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

5. 升级Storybook版本（可选） #

Storybook v6.5对Next.js 13的支持有限，升级到v7.x版本可更好兼容Next.js 13的新特性，能大概率解决这类兼容问题。

内容的提问来源于stack exchange，提问作者Sajeeb M Ahamed