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

Question

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

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

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 = {
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

Source

解析 Storybook 中的 Tailwind 样式

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

// .storybook/preview.js

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

您的 tailwindcss 现在应该可以解析了。

其他文件

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

// tailwind.config.js

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

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

How to setup Storybook with Tailwindcss, ReactJS and Typescript

typescript

reactjs

storybook

tailwind-css

设置绝对路径

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

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

解析 Storybook 中的 Tailwind 样式

其他文件