首页 文章

@ storybook / angular无法在故事索引上加载scss文件

提问于
浏览 次
1

我一直在尝试使用故事书为我的角度项目和我使用本指南https://storybook.js.org/basics/guide-angular/我使用推荐的配置为webpack for sass loader for scss文件和与项目相关的scss文件工作正常，但是如果我导入一个scss文件故事index.ts文件，这个文件没有加载 .

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 （此处推荐 - > 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;
};

而且，我的组件的scss文件加载没有问题

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() {
  }

}

存储库：https://github.com/gpincheiraa/storybook-components-sample

运行 npm install && npm run storybook 检查故事书运行 .

What I am doing wrong??

javascript angular webpack sass storybook

2 回答

  • 0

    所有样式导入必须位于Component元数据中（特别是在styles或styleUrls字段中） . 你试图将样式文件导入为js文件，这是错误的 .

    回复于
  • 0

    您正尝试从打字稿中导入scss文件 . 你必须从你的scss中包含它 .

    请删除 ：

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

    在你的scss文件中添加：

    @import "styles.scss";

    在你angular.json添加：

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

    在你.storybook / webpack.config.js请尝试：

    const path = require("path");

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

    否则有可能添加一个别名，因为Xdecus在这里说https://github.com/storybooks/storybook/issues/3814#issuecomment-401756776

    const path = require('path');

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

相关问题