如何使用 Tailwindcss、ReactJS 和 Typescript 设置 Storybook

Question

您如何设置 Storybook 以便它解析 Tailwindcss 样式并解析绝对路径？

注意：根据this，这是允许的自我记录问题/答案。这花了一段时间才弄明白，我相信很多其他人也会遇到这个问题。

Answer 1

为了解析 Storybook 中的路径，我们将使用 tsconfig 作为源。 我们假设你已经安装了一个带有 typescript 模板的 ReactJS 项目。

设置绝对路径

1.在打字稿中定义绝对路径

在tsconfig.js 中的“路径”下添加您的绝对路径。

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "#assets/*": ["./assets/*"],
      "#components/*": ["./components/*"],
      // etc.
    }
  }
  "include": ["src"]
}

2. 扩展 tsconfig 绝对路径以在 Storybook 中工作

从 npm 安装 tsconfig-paths-webpack-plugin。在撰写本文时每周有数百万次下载。

$ npm install -D tsconfig-paths-webpack-plugin
// or
$ yarn add -D tsconfig-paths-webpack-plugin

在 .storybook/main.js 下，通过将以下内容添加到您的 module.exports 来扩展 tsconfig 路径解析。

// .storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // Add the following block of code in addition to what's existing
  "webpackFinal": async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

Source

3. 在 Storybook 中解析 Tailwind 样式

在.storybook/preview.js 文件的顶部添加以下两行代码。

// .storybook/preview.js

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
import 'tailwindcss/tailwind.css';

Source

你的 tailwindcss 现在应该解析了。

附加文件

对于 Tailwind v3+，请确保您的 tailwind.config.js 没有清除选项并且没有明确声明 JIT。我的看起来像这样：

// tailwind.config.js

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};