javascript - @storybookangular cannot load scss file on stories index - Stack Overflow

admin管理员组

文章数量:1317906

I have been trying to use storybook for my angular project and I use this guide / I use the remended 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-mon/video-poster/video-posterponent';
//This scss it is not loaded
import '../src/styles.scss';

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

.storybook/webpack.config.js (remended in here --> )

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 = /\ponent\.css$/;
  }

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

  return config;
};

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

src/app/modules/ui-mon/video-poster/video-posterponent.ts

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

@Component({
  selector: 'app-video-poster',
  templateUrl: './video-posterponent.html',
  styleUrls: ['./video-posterponent.scss'] // this were loaded without problems
})
export class VideoPosterComponent implements OnInit {
  private hostUrl = '.gallereplay/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:

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

What I am doing wrong??

I have been trying to use storybook for my angular project and I use this guide https://storybook.js/basics/guide-angular/ I use the remended 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-mon/video-poster/video-poster.ponent';
//This scss it is not loaded
import '../src/styles.scss';

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

.storybook/webpack.config.js (remended in here --> https://storybook.js/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 = /\.ponent\.css$/;
  }

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

  return config;
};

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

src/app/modules/ui-mon/video-poster/video-poster.ponent.ts

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

@Component({
  selector: 'app-video-poster',
  templateUrl: './video-poster.ponent.html',
  styleUrls: ['./video-poster.ponent.scss'] // this were loaded without problems
})
export class VideoPosterComponent implements OnInit {
  private hostUrl = 'https://s3-eu-west-1.amazonaws./video.gallereplay./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./gpincheiraa/storybook-ponents-sample

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

What I am doing wrong??

• javascript
• angular
• webpack
• sass
• storybook

Share Improve this question Follow asked Feb 14, 2018 at 20:44 Gonzalo Pincheira ArancibiaGonzalo Pincheira Arancibia 3,62322 gold badges2525 silver badges4343 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 acplish this: https://github./storybookjs/storybook/issues/6364#issuement-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!

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./storybooks/storybook/issues/3814#issuement-401756776

const path = require('path');

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

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.

本文标签： javascriptstorybookangular cannot load scss file on stories indexStack Overflow