Question

我有一个 NX Workspace for angular。所有最新版本（angular 12.0.0、NX 12.3.4、storybook 6.3.0）我创建了一个名为 ui-core 的库，并添加了一个示例导航菜单组件进行测试。然后我添加了 nx 故事书原理图和故事书运行，我还通过@ng-neat/tailwind 将其设置为使用顺风。

我也依赖 kendo ui for angular，他公开了许多 scss 文件来设置组件样式。

问题是无论我尝试以哪种方式从 ~@progress/kendo-theme-material 导入样式，它们都会这样做未应用于故事书实例。
但是：如果我将组件从 ui-core 库导入主 angular 应用程序并运行 ng serve，它们确实会得到应用。

示例：右边是使用菜单导航的应用程序的服务，左边是相同组件的故事书

我尝试过的：

更改 storybook 的 main.js 配置（webPackFinal 是根据 these docs from storybook 添加的部分）：

    const rootMain = require('../../../../.storybook/main');
    const path = require('path');
    
    rootMain.core = {
      ...rootMain.core,
      builder: 'webpack5',
    };
    
    rootMain.exports = {
      ...rootMain.exports,
      webpackFinal: async (config, { configType }) => {
        config.module.rules.push({
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          include: path.resolve(__dirname, '../'),
        });
      },
    };
    
    rootMain.stories.push(
      ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)']
    );
    
    module.exports = rootMain;

在 preview.js 中添加文件导入，同时在 npm package.json 中添加了 "css-loader": "^5.2.4"

import '!style-loader!css-loader!sass-loader!../src/kendo.scss';

我还尝试在 preview.js 中使用以下格式导入，无论格式如何，它总是会破坏故事书的构建：

import '!style-loader!css-loader!sass-loader!~@progress/kendo-theme-material/dist/all.css';
import '!style-loader!css-loader!sass-loader!../../../../node_modules/@progress/kendo-theme-material/dist/all.css';

这是我的 kendo.scss 文件：

@import "~@progress/kendo-theme-material/scss/appbar/_index.scss";
@import "~@progress/kendo-theme-material/scss/autocomplete/_index.scss";
@import "~@progress/kendo-theme-material/scss/badge/_index.scss";
@import "~@progress/kendo-theme-material/scss/button/_index.scss";
@import "~@progress/kendo-theme-material/scss/checkbox/_index.scss";
etc...

我已经尝试了 this git issue 中几乎所有变体的解决方案

问题：

有人能帮我弄清楚如何从 kendo ui 获取 scss 文件应用到我的故事书实例中吗？

Answer 1

首先，我要感谢故事书 discord 中的 HailToTheKing 对此提供的帮助。

这里的问题是我需要将 kendo ui 模块导入到这个故事的故事书配置中。我没有意识到导入到 nx lib 中的模块不会自动获取。

所以这不是 scss 问题。浏览器控制台为剑道组件抛出了很多未找到元素的错误。一旦我将它们导入到故事书配置中，组件就会正确呈现。

这是我的 component.stories.ts 配置：

import { Story, Meta } from '@storybook/angular/types-6-0';
import { NavMenuComponent } from './nav-menu.component';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { IndicatorsModule } from '@progress/kendo-angular-indicators';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { IconsModule } from '@progress/kendo-angular-icons';
import { NavigationModule } from '@progress/kendo-angular-navigation';

export default {
  title: 'Nav Menu',
  component: NavMenuComponent,
} as Meta;

const Template: Story<NavMenuComponent> = (args) => ({
  props: args,
  moduleMetadata: {
    imports: [
      LayoutModule,
      InputsModule,
      IconsModule,
      IndicatorsModule,
      NavigationModule,
    ],
  },
});

export const primary = Template.bind({});
primary.args = { title: 'MY APP' };
primary.storyName = 'Top Navigation Menu';

将 kendo 模块导入添加到 moduleMetadata 是使其一切正常的原因。现在这是有道理的，因为它应该是隔离的 ui 测试，哈哈。

旁注，如果您在 storybook 6 中使用 angular 12，此时您需要使用 alpha 来克服一些构建错误。

scss 样式未应用于 nx 角度工作区 lib

问题：

1 个答案: