angular - 在带有 Angular 的 Storybook 6 中使用 TailwindCss
问题描述
我正在使用 Angular (11.2.8) 构建一个组件库,并尝试添加 TailwindCss 和 Storybook 6。
我发现了不同的配置,但它们都不起作用。运行故事书时,我的组件没有样式。
这是我的配置:
.storybook/main.js
const path = require('path');
module.exports = {
stories: ['../projects/storybook/**/*.stories.ts'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-viewport',
'@storybook/addon-docs',
'@storybook/addon-a11y',
'@storybook/addon-storysource'
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\,css&/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
},
],
include: path.resolve(__dirname, '../'),
});
return config;
}
};
.storybook/preview.js
import '../src/styles.scss';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation/documentation.json';
setCompodocJson(docJson);
src/styles.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
package.json
{
"name": "test",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"docs:json": "compodoc -d documentation -p projects/test/tsconfig.lib.json -e json ",
"storybook": "npm run docs:json && start-storybook -p 6006",
"build-storybook": "npm run docs:json && build-storybook -o dist/storybook"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.7",
"@angular/common": "~11.2.7",
"@angular/compiler": "~11.2.7",
"@angular/core": "~11.2.7",
"@angular/forms": "~11.2.7",
"@angular/platform-browser": "~11.2.7",
"@angular/platform-browser-dynamic": "~11.2.7",
"@angular/router": "~11.2.7",
"@tailwindcss/forms": "^0.3.2",
"@tailwindcss/typography": "^0.4.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular-builders/jest": "^11.1.1",
"@angular-devkit/build-angular": "~0.1102.7",
"@angular/cli": "~11.2.6",
"@angular/compiler-cli": "~11.2.7",
"@compodoc/compodoc": "^1.1.11",
"@storybook/addon-a11y": "^6.2.1",
"@storybook/addon-actions": "^6.2.1",
"@storybook/addon-docs": "^6.2.1",
"@storybook/addon-knobs": "^6.2.1",
"@storybook/addon-links": "^6.2.1",
"@storybook/addon-storysource": "^6.2.1",
"@storybook/addon-viewport": "^6.2.1",
"@storybook/addons": "^6.2.1",
"@storybook/angular": "^6.2.1",
"@tailwindcss/postcss7-compat": "^2.1.0",
"@types/jest": "^26.0.22",
"@types/node": "^12.11.1",
"autoprefixer": "^9.8.6",
"codelyzer": "^6.0.0",
"jest": "^26.6.3",
"ng-packagr": "^11.0.0",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
"ts-jest": "^26.5.4",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.5"
}
}
projects/test/storybook/src/stories/button.stories
import { boolean, text, select } from '@storybook/addon-knobs';
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import {ButtonComponent, ButtonModule} from 'test';
const title = 'Button';
export default {
title,
component: ButtonComponent,
decorators: [
moduleMetadata({
imports: [ButtonModule, CommonModule]
})
]
};
const template = `
<test-button
[size]="size"
[outline]="outline"
[block]="block"
[loading]="loading"
[disabled]="disabled"
(click)="clicked">
{{content}}
</test-button>
`;
const defaultProps = () => {
return {
content: text('content', 'text'),
loading: boolean('loading', false),
type: select('type', {
text: 'text',
submit: 'submit'
}, 'text'),
size: select('size', {
sm: 'sm',
lg: 'lg',
xl: 'xl'
}, null),
outline: boolean('outline', null),
block: boolean('block', null),
disabled: boolean('disabled', null)
};
};
export const Button = () => ({
template,
props: defaultProps()
});
projects/test/.../button.component.html
<button class="px-4 border border-transparent shadow-sm text-sm font-medium rounded-md bg-red-400 text-primary py-2" [type]="type" [ngClass]="classes" [attr.disabled]="loading || disabled ? 'disabled' : null"
(click)="clicked.emit($event)">
<ng-content></ng-content>
</button>`
tailwind.config.js
module.exports = {
prefix: '',
purge: {
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
colors: {
primary: '#ecc94b',
},
},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};
不应用顺风样式
我不知道我的配置中缺少什么
解决方案
您可以使用 Angular 12、Tailwind 2.1 JIT 和 Storybook 6.3 附带的这个模板。这个 repo 也有原子文件夹结构,以防万一你进入它。它还拥有最新的 Ivy 渲染管道,提高了性能。
推荐阅读
- angular - 接收新数据时角材料表不更新
- python - 使用 UCX 协议 Dask 分布式
- java - 来自android java的数组
- rust - 在 Substrate 中散列并检查散列是否匹配
- java - 如何模拟比您正在测试的方法更晚调用的类?
- linux - 如何知道 htpdate 是否已同步系统时钟?
- laravel - Laravel 请求不在生产模型中工作,但在本地工作
- reactjs - 添加 react-table-scrollbar 后,React-table 排序停止工作
- javascript - React.cloneElement 不附加类名
- statistics - 我们是否需要同时进行局部敏感性分析和全局敏感性分析?