@storybook/angular cannot load scss file on stories index

Question

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??

score 4 · Answer 1 · answered Oct 22 '19 at 21:32

I assume that, like me, you're looking for a way to load global styles from SASS files into an Angular Storybook. I know it's been a while since you asked, but I came across this solution while searching for a way to accomplish this: https://github.com/storybookjs/storybook/issues/6364#issuecomment-485651328.

Basically, you can load your global styles in the Storybook config file. However, you need to use inline webpack loaders in the import path so Storybook will load them properly.

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

That did the trick for me. In the end I didn't have to bother with the custom webpack config. Hopefully that solves your problem!

I have tried same but, it did not work for me. I have a custom scss file at root level which imports other scss, few mixins and angular material typography. Although I was not getting error,. but styles are not getting applied! Here you can find details https://stackoverflow.com/questions/63247632/how-to-load-global-scss-files-in-storybook-for-angular-app — ot954, Aug 05 '20 at 05:36

score 2 · Answer 2 · answered Oct 31 '18 at 09:29

You are trying to import an scss file from your typescript. You must include it from your scss.

Please remove :

//This scss it is not loaded
import '../src/styles.scss';

In your scss file add :

@import "styles.scss";

In you angular.json add :

"styles": [
     "src/styles.scss",
 ],
 "stylePreprocessorOptions": {
      "includePaths": [
          "src/" // maybe not required in your case
        ]
  },

In you .storybook/webpack.config.js please try :

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["sass-loader"],
        include: path.resolve(__dirname, "../src/")
      }
    ]
  }
};

Otherwise there is the possibility to add an alias as Xdecus said here https://github.com/storybooks/storybook/issues/3814#issuecomment-401756776

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            styles: path.resolve(__dirname, '../src/')
        }
    }
};

score 0 · Answer 3 · answered Feb 14 '18 at 21:30

0

All style imports must be in Component metadata (specifically in styles or styleUrls field). You're trying to import style file as js file, which is wrong.

answered Feb 14 '18 at 21:30

VagrantAI

661
7
15

@storybook/angular cannot load scss file on stories index

3 Answers3

Linked