css - Tailwind css 类未在 Storybook 构建中显示
问题描述
我正在尝试用顺风 css 构建我的故事书。运行时build-storybook
,组件使用顺风类呈现。不幸的是,当我构建故事书并运行创建构建storybook-static
时npx http-server storybook-static
,类没有加载到故事中,并且组件显示没有样式。
这是我项目的 repro repo: https ://gitlab.com/ens.evelyn.development/storybook-issue
这是我的main.js
:
const path = require('path')
module.exports = {
"stories": [
"../src/components/**/**/*.stories.mdx",
"../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
"@storybook/addon-actions",
"storybook-tailwind-dark-mode"
]}
我的项目结构如下所示:
.storybook
src
components
subdir
Button
index.tsx
button.stories.js
styles
index.css (<-- tailwindcss file)
非常感谢任何提示或建议。
解决方案
更新:我的原始答案可能对其他人有用,因此我将其留作参考。但是,在这种情况下,问题出在 tailwind.config.js 中。
改变
purge: {
mode: 'all',
content: [
'./src/components/**/**/*.{ts, tsx}'
],
},
至
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
原来的:
刚刚对其进行了测试,故事书按我的预期构建。我认为我们配置的主要区别在于我没有在 main.js 中更改 Storybook 的 webpack 配置。相反,我将@storybook/addon-postcss用于 postcss@^8(tailwind@^2 需要):
// main.js
module.exports = {
...
addons: [
...
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
};
我在 postcss.config.js 中指定了必要的插件(在我的项目根目录中):
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
还值得注意的是,我直接在 Storybook 的 preview.js 中导入 Tailwind,而不是通过我自己的 css 文件:
// preview.js
import 'tailwindcss/tailwind.css';
export const parameters = {...}
希望进行这些更改将使 Tailwind 为您工作。
为了比较(见下面的评论),这里是我的 build storybook-static 目录的内容:
推荐阅读
- c++ - 运算符 '=' 不匹配(std::array
和 std::initializer_list ) - java - 具有不同值的子类构造函数
- laravel - 如何将html转换为pdf并存储在laravel中?
- angular - 嵌套反应表单中的错误 - 类型“AbstractControl”上不存在属性“控件”
- lua - 在 lua 脚本中替代 grep
- java - 在 295 次插入后关闭连接并创建一个不超过最大游标的新连接
- pandas - 如何计算熊猫中计数的百分比?
- angular - 谷歌地图中的多个多边形循环用于新的 google.maps.Polygon 在循环下不工作
- oracle - 如何在oracle中插入选择查询中使用复杂条件
- python - 无法使用 ezsheets 完成 Google 表格 API 授权