Vite+React+Tailwind项目SCSS自定义颜色在Storybook不生效

核心修复步骤 #

1. 同步Storybook与项目Vite配置 #

Storybook默认Vite配置未继承项目的SCSS/Tailwind处理逻辑，需在.storybook/main.ts中合并项目配置：

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';
import viteConfig from '../vite.config';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: { name: '@storybook/react-vite', options: {} },
  docs: { autodocs: 'tag' },
  // 合并项目Vite配置，确保SCSS编译逻辑一致
  viteFinal: async (config) => mergeConfig(config, viteConfig),
};
export default config;

2. 确认Preview中SCSS导入的正确性 #

在.storybook/preview.ts中，确保SCSS文件路径正确，且导入顺序符合样式优先级：

// .storybook/preview.ts
import '../src/style.scss'; // 路径需对应项目根目录下的SCSS文件
import type { Preview } from '@storybook/react';

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

export default preview;

3. 确保Tailwind扫描Storybook文件 #

在tailwind.config.js中，将stories文件加入内容扫描范围，否则自定义颜色等变量无法被Tailwind识别：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.stories.{js,ts,jsx,tsx}" // 关键：新增该行
  ],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)', // 对应SCSS中的自定义变量
        secondary: 'var(--color-secondary)',
      },
    },
  },
  plugins: [],
}

4. 验证SCSS文件的变量定义与Tailwind集成 #

检查style.scss中是否正确定义变量并引入Tailwind指令：

// src/style.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

// 自定义全局变量
:root {
  --color-primary: #165DFF;
  --color-secondary: #FF7D00;
}

// 可选：通过Tailwind层扩展样式
@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
  }
}

5. 重置缓存并重启服务 #

缓存可能导致样式不更新，执行以下操作：

• 关闭Storybook和Vite服务
• 删除.storybook/.cache和node_modules/.vite目录
• 重新启动Storybook：npm run storybook

6. 检查依赖版本兼容性 #

确保核心依赖版本匹配，避免版本冲突：

• @storybook/react-vite: ^7.0.0+
• tailwindcss: ^3.0.0+
• sass: ^1.60.0+
• vite: ^4.0.0+

若版本差异过大，建议重新安装依赖：

npm install

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