scss 样式未在 nx angular 工作区库中应用

Question

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

将它设置为使用 tailwind

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

问题是无论我尝试从哪种方式导入样式 ~@progress/kendo-theme-material 它们不会应用到故事书实例中。
但是：如果我将组件从 ui-core lib 导入主 angular 应用程序并且运行 ng serve.

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

我尝试过的：

更改故事书的 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，还添加了 "css-loader": "^5.2.4", 到 npm package.json

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

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

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

首先，我要感谢 storybook discord 中的 HailToTheKing 提供的帮助。

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

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

这是我的 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 测试，哈哈。

旁注，如果您将 angular 12 与故事书 6 一起使用，此时您需要使用 alpha 来克服一些 build 错误。

scss 样式未在 nx angular 工作区库中应用

scss style not getting applied in nx angular workspace lib

sass

kendo-ui

angular

storybook

nrwl-nx

问题：