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

Posted 2023-02-19

【中文标题】scss 样式未在 nx 角度工作区库中应用

【英文标题】：scss style not getting applied in nx angular workspace lib

【发布时间】：2021-08-16 04:30:49

【问题描述】：

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

我还依赖于 angular 的 kendo ui，它公开了许多 scss 文件以设置其组件的样式。

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

示例： 右边是使用菜单导航的应用程序的 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 中导入以下格式，但无论格式如何，它总是会破坏故事书的构建：

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 文件吗？

【参考方案1】：

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

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

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

这是我的 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 与 Storybook 6 一起使用，此时您需要使用 alpha 来克服一些构建错误。