@storybook/angular cannot load scss file on stories index

主宰稳场 提交于 2019-12-13 17:12:11

问题


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


回答1:


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/')
        }
    }
};



回答2:


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.




回答3:


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!



来源:https://stackoverflow.com/questions/48795872/storybook-angular-cannot-load-scss-file-on-stories-index

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!