Next.js 13+TailwindCSS下Storybook无法解析CSS图片路径问题

可以通过调整Storybook的Webpack配置解决问题，无需修改CSS中url()的取值，具体配置如下：

方法一：添加路径别名 #

在webpackFinal的resolve.alias中新增映射规则，将/images指向项目实际的图片目录：

webpackFinal: async (config, options) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    "@/components": path.resolve(__dirname, "../src/components"),
    "@/assets": path.resolve(__dirname, "../src/assets"),
    "/images": path.resolve(__dirname, "../public/images") // 新增该行
  };
  return config;
},

方法二：配置Webpack模块规则 #

如果别名方式无效，可以添加Webpack模块规则，同时配置解析根目录：

webpackFinal: async (config, options) => {
  // 保留原有别名配置
  config.resolve.alias = {
    ...config.resolve.alias,
    "@/components": path.resolve(__dirname, "../src/components"),
    "@/assets": path.resolve(__dirname, "../src/assets")
  };

  // 添加图片处理规则
  config.module.rules.push({
    test: /\.(png|jpe?g|gif|svg)$/i,
    use: [
      {
        loader: "url-loader",
        options: {
          limit: 8192,
          name: "[name].[hash:7].[ext]",
          outputPath: "images/",
          publicPath: "/images/"
        }
      }
    ],
    include: path.resolve(__dirname, "../public/images")
  });

  // 让Webpack解析根路径时包含public目录
  config.resolve.roots = [
    ...(config.resolve.roots || []),
    path.resolve(__dirname, "../public")
  ];

  return config;
},

原理说明 #

你的staticDirs配置已经让Storybook静态服务器能访问/images路径，但Webpack编译Tailwind CSS时，会尝试解析url()里的绝对路径——默认情况下Webpack不会把根路径映射到项目的public目录，所以需要通过别名或根目录配置，告诉Webpack该路径对应的实际文件位置。

修改配置后重启Storybook即可生效。

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