Storybook集成Tailwind：背景图片路径无法解析的解决方案咨询

方案一：给Storybook单独搞一份Tailwind配置 #

• 直接在项目根目录新建个Storybook专用的Tailwind配置文件，比如叫tailwind.storybook.config.js
• 把原来的Tailwind配置内容复制过来，只改backgroundImage里的路径成Storybook能识别的相对路径：

backgroundImage: (theme) => ({
  "drop-arrow": "url('../www/www/res/public/images/drop_down_arrow.svg')",
  // 其他背景图配置照抄原文件
})

• 改一下Storybook的配置文件（.storybook/main.js或者.storybook/main.ts），让它用这份新配置：

module.exports = {
  addons: [
    {
      name: '@storybook/addon-styling',
      options: {
        tailwind: {
          configPath: './tailwind.storybook.config.js',
        },
      },
    },
  ],
};

这样主项目的Tailwind配置完全不动，不会影响原有功能，Storybook单独用适配后的配置就行。

方案二：让Storybook识别原有的绝对路径 #

不用改Tailwind配置，直接给Storybook加个路径映射，让它把/res/指向实际的文件目录：

• 打开.storybook/main.js，添加webpackFinal配置，给webpack加个别名：

module.exports = {
  webpackFinal: async (config) => {
    // 把/res别名映射到实际的目录路径
    config.resolve.alias = {
      ...config.resolve.alias,
      '/res': '../www/www/res',
    };
    // 如果项目还没配置svg的处理规则，就加上这一段
    config.module.rules.push({
      test: /\.svg$/,
      use: ['file-loader'],
    });
    return config;
  },
};

这样Storybook碰到url('/res/public/images/drop_down_arrow.svg')时，会自动转成实际的文件路径，主项目的配置一点不用改，两边都能正常运行。

两种方案随便选，方案一适合后续要给Storybook做更多Tailwind定制的情况，方案二更省事，不用维护两份配置。

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