3

I am trying to get an Nx 12 workspace running storybook for some angular components I am authoring.

I am facing an issue when trying to include global scss files, I keep getting the following error.

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

Reading the docs, for angular versions prior to 13 believe I need to configure loaders like so in my storybook main.js:

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

I have also tried to include via imports in preview.js like

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

I cannot figure out what is causing the problem.

This is easy to see in this repo here, after running npm install just run nx run c-design-patterns:storybook

mindparse
  • 6,115
  • 27
  • 90
  • 191
  • Your angular components are not angular, according to repo, they are dynamically created in a React way without any Angular usage. You should just create them as angular components, assign {component}.styles.css in a component declaration and it will work – Lonli-Lokli Oct 21 '22 at 11:34
  • @Lonli-Lokli ignore the readme, thats outdated which doesnt help I know! – mindparse Oct 21 '22 at 12:41
  • I was ignoring, my comment was about actual code - without NgModule it's not angular. I am talking about this https://github.com/parky128/nx12-ng-storybook/tree/master/stories – Lonli-Lokli Oct 21 '22 at 15:39
  • I dont understand whats giving you that impression, all the components inside the c-design-patterns libs are angular. There is nothing react flavoured in what's being showcased in the repo, please point out to me where you are looking. Thanks – mindparse Oct 21 '22 at 15:49
  • Ahhh, those were auto generated by storybook when I set this up initially – mindparse Oct 21 '22 at 15:55

1 Answers1

2

  1. Thats bug with scss file processing, not styles loadin. This is Storybook bug, see https://github.com/storybookjs/storybook/issues/19266

  2. It's better to create it in an Angular way (NOTE: IT WILL NOT WORK DUE TOO due to Storybook issue above). I've also created PR for you a) add moduleMetadata

    moduleMetadata({ providers: [ThemeModule.forRoot().providers] }),

b) add theme module & theme service

@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) create ThemepackComponent with styles, using @import syntax

@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';
Lonli-Lokli
  • 3,357
  • 1
  • 24
  • 40
  • Thanks for spending the time in looking at this, but I just tried pulling down your `theme` branch from your fork and re-running `nx run c-design-patterns:storybook` and I get the same errors – mindparse Oct 21 '22 at 19:19
  • As I said in my point 2, this error will be there anyway because of storybook bug, see point 1. My point 2 is just a another way to load global styles storybook – Lonli-Lokli Oct 21 '22 at 21:58