angular - 获取全局样式的问题包括在 Nx 和 Angular 12 的故事书中

Question

我正在尝试为我正在创作的一些 Angular 组件获取一个 Nx 12 工作区运行故事书。

我在尝试包含全局 scss 文件时遇到问题，我不断收到以下错误。

SassError: SassError: expected "{".
  ╷
2 │       import API from "!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                              ^

阅读文档，对于 13 之前的 Angular 版本，我相信我需要像在我的故事书 main.js 中那样配置加载器:

config.module.rules.push({
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
          });

我也尝试过在 preview.js 中通过导入包含

import '!style-loader!css-loader!sass-loader!../src/styles/global.scss';
import '!style-loader!css-loader!sass-loader!../../ui-css-kit/scss/index.scss';

我无法弄清楚是什么导致了这个问题。

这很容易在这个 repo 中看到 here , 在运行 npm install 之后运行 nx run c-design-patterns:storybook

Answer 1

1. 那是 scss 文件处理的错误，而不是样式加载。这是 Storybook 错误，请参阅 https://github.com/storybookjs/storybook/issues/19266

2. 最好以 Angular 方式创建它(注意:由于上面的 Storybook 问题，它不会工作)。我也为你创建了 PRa) 添加模块元数据

   模块元数据({提供商:[ThemeModule.forRoot().providers]}),

b) 添加主题模块和主题服务

@NgModule({})
export class ThemeModule {
  public static forRoot(): ModuleWithProviders<ThemeModule> {
    return {
      ngModule: ThemeModule,
      providers: [ThemeService],
    };
  }
}

@Injectable()
export class ThemeService {
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {
    if (!document.body.querySelector("theme-pack")) {
      new DomPortalOutlet(
        document.body,
        this.componentFactoryResolver,
        this.appRef,
        this.injector
      ).attach(new ComponentPortal(ThemepackComponent));
    }
  }
}

c) 使用@import 语法创建带样式的 ThemepackComponent

@import '../../styles/global';
@import '../../../../ui-css-kit/scss/index';
@import '../../../../ui-css-kit/scss/5-global/body';
@import '../../../../ui-css-kit/scss/5-global/h-p-elements';
@import '../../../../ui-css-kit/scss/5-global/list';