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

Posted 2023-02-19

【中文标题】@storybook/angular 无法在故事索引上加载 scss 文件

【英文标题】：@storybook/angular cannot load scss file on stories index

【发布时间】：2018-07-25 12:55:55

【问题描述】：

我一直在尝试将故事书用于我的 Angular 项目，我使用本指南 https://storybook.js.org/basics/guide-angular/ 我使用 webpack 推荐的 config for sass loader 来处理 scss 文件，并且与项目相关的 scss 文件工作正常，但是如果我在 stories index.ts 文件中导入 scss 文件，则不会加载该文件。

故事/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 以检查故事书的运行情况。

我做错了什么？？

【参考方案1】：

我假设您和我一样正在寻找一种将全局样式从 SASS 文件加载到 Angular Storybook 中的方法。我知道你问已经有一段时间了，但我在寻找实现此目的的方法时遇到了这个解决方案：https://github.com/storybookjs/storybook/issues/6364#issuecomment-485651328。

基本上，您可以在 Storybook 配置文件中加载全局样式。但是，您需要在导入路径中使用内联 webpack 加载器，以便 Storybook 正确加载它们。

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

这对我有用。最后，我不必为自定义 webpack 配置而烦恼。希望能解决您的问题！

【讨论】：

我也试过了，但是对我没用。我在根级别有一个自定义 scss 文件，它可以导入其他 scss、少量 mixins 和有角度的材料排版。虽然我没有收到错误，。但是样式没有得到应用！在这里您可以找到详细信息***.com/questions/63247632/…

【参考方案2】：

您正在尝试从您的打字稿中导入一个 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/')
        
    
;

【参考方案3】：

所有样式导入都必须在组件元数据中（特别是在样式或 styleUrls 字段中）。您正在尝试将样式文件导入为 js 文件，这是错误的。