Storybook: @storybook/angular cannot load scss file on stories index

[gpincheiraa]

I have been trying to use storybook for my angular project and I use this guide https://storybook.js.org/basics/guide-angular/
I use the recommended config for webpack for sass loader for scss files and the scss file related to the project works fine, but if I import a scss file in the stories index.ts file, this file it is not loaded.

stories/index.ts

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { VideoPosterComponent } from '../src/app/modules/ui-common/video-poster/video-poster.component';
//This scss it is not loaded
import '../src/styles.scss';

storiesOf('Video Poster component', module)
  .add('Video Poster with author data', () => ({
    component: VideoPosterComponent,
    props: {
        title: "Cinemagraph With Custom title",
        subtitle: "This is a custom subtitle!"
    }
  }))
  .add('Video Poster without author data', () => ({
    component: VideoPosterComponent,
    props: {}
  }));

.storybook/webpack.config.js (recommended in here --> https://storybook.js.org/basics/guide-angular/#configure-style-rules)

const genDefaultConfig = require('@storybook/angular/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  // Overwrite .css rule
  const cssRule = config.module.rules.find(rule => rule.test && rule.test.toString() === '/\\.css$/');
  if (cssRule) {
    cssRule.exclude = /\.component\.css$/;
  }

  // Add .scss rule
  config.module.rules.unshift({
    test: /\.scss$/,
    loaders: ['raw-loader', 'sass-loader'],
  });

  return config;
};

And, the scss file for my component was loaded without problems

src/app/modules/ui-common/video-poster/video-poster.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-video-poster',
  templateUrl: './video-poster.component.html',
  styleUrls: ['./video-poster.component.scss'] // this were loaded without problems
})
export class VideoPosterComponent implements OnInit {
  private hostUrl = 'https://s3-eu-west-1.amazonaws.com/video.gallereplay.com/portfolio/clients';
  private baseUrl = `${this.hostUrl}/jaegermeister/Cinemagraph_plain/1920x1080`;

  @Input()
  public videoUrls = {
    poster: `${this.baseUrl}/cinemagraph.jpg`,
    mp4: `${this.baseUrl}/cinemagraph.mp4`,
    webm: `${this.baseUrl}/cinemagraph.webm`,
  }
  @Input() public title = 'Custom Cinemagraph Productions';
  @Input() public subtitle = 'Exclusive Content for Businesses';

  constructor() { }

  ngOnInit() {
  }

}

Repository:
https://github.com/gpincheiraa/storybook-components-sample

run npm install && npm run storybook for check storybook running.

What I am doing wrong??

[igor-dv]

@gpincheiraa, how does the style.scss load into your regular app? (not in Storybook ?)

[gpincheiraa]

The angular-cli project do this automatically for add the global styles through this file (
src/styles.scss). It is a way for adding global styles to the stories?

[igor-dv]

As far as I know angular-cli loads styles globally according to the
.json "styles": [ "styles.css" ],
from the .angular-cli.json . Am I wrong ?

Anyway if you want to load your style.css (not scss), it is supported by the 3.4.0-alpha.8 version.

[agnislav]

@igor-dv , does it mean that the same approach but with scss isn't supported in the alpha.8 yet?

[igor-dv]

I am not familiar with all the options of angular-cli, but If angular-cli supports this, probably it will work (I mean the styles field in the json). It was introduced by #2735. Anyway, if it doesn't work out of the box, we can always add some extra rules to the full control mode of the webpack.config in .storybook.

[gpincheiraa]

@igor-dv you are right about .angular-cli.json. Let me check using the version 3.4.0-alpha.8.

Edit: It's work using the version 3.4.0-alpha.8 !!! thanks!

[igor-dv]

👌

[TheVikash]

@gpincheiraa are you able to import the global scss file in storybook ? From your above comment i am having one doubt that it worked with global css or global scss.

[igor-dv]

You can do it like is explained here:
https://github.com/storybooks/storybook/pull/3022/files#diff-15724440f3f36278f5cc1a2b71953ac3R59