添加tailwindcss时出现故事书错误

Question

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

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

尝试设置tailwindcss之前的工作情况

• Storybook运行并编译了组件和故事
• PostCSS8+与一些插件

我做了什么

• 已安装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 postpass与TailwindCss v3 JIT和storybooks热重新加载配合不太好。

在此期间，我通过使用postpass加载程序webpack加载程序使其正常工作。

安装以下dep：

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: {},
},
};