描述bug
当默认项目是一个Angular库时,来自angular material的样式不起作用。
重现
我使用以下命令创建一个应用程序:ng new design-system --create-application=false --prefix=css --style=scss --minimal
我创建了一个库。我想在以下目录中开发我的组件:ng generate library components --prefix=cs
我将angular material添加到库中:ng add @angular/material
我将滑块组件添加到我的库中
我在工作区中添加storybook:npx -p @storybook/cli sb init --type angular
编写故事并运行它:npm run storybook
不起作用...
我创建了一个应用程序类型的项目:ng generate application demo --minimal
将angular material添加到demo项目中
我使用了滑块组件
它可以工作!
令人惊讶的是,如果我将defaultProject从design-system(库)更改为demo(应用程序),...它可以工作!
示例仓库:https://github.com/krbaio3/bug-sb-ko.git
我知道这是一个bug,因为我想要只有一个带有Storybook的库,我必须添加一个应用程序项目并将默认项目更改为运行SB吗?
谢谢!
8条答案
按热度按时间ej83mcc01#
我正在使用我的Angular 12项目作为库,样式不起作用。唯一能让我将样式传入storybook的方法是将它们添加到angular.json的全局样式中,但这不是一个可行的解决方案,因为在库项目的angular.json中不允许使用全局样式。@ronaldohoch,你是如何解决这个问题的?
0g0grzrc2#
我不记得确切的内容了,但我认为是在preview.js中被注解掉的那一行。请查看下面的内容:
这是我的 .storybook/main.js
这是我的 .storybook/preview.js
zxlwwiss3#
虽然这与 #15246 不完全相同,但我认为它基本上是由相同的问题引起的。
如果你不想将你的默认项目从库更改为应用程序,你目前有两个其他选择。
STORYBOOK_ANGULAR_PROJECT
来提供 Storybook 要从中获取配置的项目名称。qxsslcnc4#
你有了一个新的第三个选项:p
在你的情况中,你不能用
"browserTarget": "demo:build",
标记你的演示项目。mbzjlibv5#
可能有点晚。我刚刚发现,对于$x_1m_0n_1^x$,在Angular JSON中添加材料主题样式URL在项目是Angular库时是有效的。
$x_1c_d_1^x$
smdncfj36#
你能更新一下仓库吗?我遇到了同样的问题。
kcwpcxri7#
@ronaldohoch 我已经更新了仓库,但忘记推送了。
deikduxw8#
谢谢你。
我可以让我的项目工作!