storybook SB在项目为库时未加载Angular material样式,

mqxuamgl 于 10个月前发布在 Angular

关注(0)|答案(8)|浏览(154)

描述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吗？
谢谢！

storybook

来源：https://github.com/storybookjs/storybook/issues/14912

8条答案

按热度按时间

ej83mcc01#

我正在使用我的Angular 12项目作为库，样式不起作用。唯一能让我将样式传入storybook的方法是将它们添加到angular.json的全局样式中，但这不是一个可行的解决方案，因为在库项目的angular.json中不允许使用全局样式。@ronaldohoch,你是如何解决这个问题的？

赞(0）回复(0）举报 10个月前

0g0grzrc2#

我不记得确切的内容了，但我认为是在preview.js中被注解掉的那一行。请查看下面的内容：
这是我的 .storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../projects/ui/src/lib/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/preset-scss",
    '@storybook/addon-controls',
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    'storybook-dark-mode'
  ]
}

这是我的 .storybook/preview.js

import { setCompodocJson } from "@storybook/addon-docs/angular";
import { themes } from '@storybook/theming';
import docJson from "../documentation.json";
setCompodocJson(docJson);
//This line is from my custom theme from material design, so, just put this line with your theme
import "../projects/ui/src/lib/web/styles/blue-theme.scss";
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: { inlineStories: true },
  darkMode: {
    // Override the default dark theme
    dark: { ...themes.dark, appBg: 'black' },
    // Override the default light theme
    light: { ...themes.normal }
  },
  options: {
    storySort: {
      order: ['Intro'],
    },
  },
}