添加 tailwindcss 时出现 Storybook 错误

Question

我正在尝试将tailwindcss v3添加到现有的故事书设置中。

我已经尝试并遵循了所有具有类似功能的指南。请帮忙。

在尝试设置 tailwindcss 之前它正在做什么

• Storybook 运行并编译组件和故事。
• PostCSS 8+ 带有一些插件。

我做了什么

• 已安装tailwindcss

• 添加tailwindcss:{}到postcss.config.js

• 我将新添加的导入styles/globals.css到storybook/preview.js

像这样：import './styles/globals.css';并添加了指令

/******** storybook/styles/globals.css ********/

@tailwind base;
@tailwind components;
@tailwind utilities;

• 我在中设置了以下配置main.js

/******** storybook/main.js ********/

module.exports = {
  stories: ['./stories/*.stories.mdx', './stories/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['./public'],
  core: {
    builder: 'webpack5',
  },
};

我运行时遇到的错误yarn storybook。

/******** iTerm2 output ********/

99% done plugins webpack-hot-middleware
webpack built preview 02e06cdf44b2c261d88f in 13260ms
ModuleBuildError: Module build failed 
(from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/*MY_PROJECT*/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)

Answer 1

问题似乎是 @storybook/addon-postcss 与 TailwindCss v3 JIT 和 Storybooks 热重载不太一致。

同时我通过使用 postcss-loader webpack 加载器让它正常工作。

安装这些依赖项：

yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5 postcss-loader webpack

// .storybook/main.js
const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    // {
    //   name: "@storybook/addon-postcss",
    //   options: {
    //     postcssLoaderOptions: {
    //       implementation: require("postcss"),
    //     },
    //   },
    // },
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

// .storybook/preview.js
import "../styles/globals.css";

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

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};