我一直在尝试将故事书用于我的 Angular 项目,并且我使用了本指南 https://storybook.js.org/basics/guide-angular/ 我使用 webpack 的推荐配置用于 scss 文件的 sass 加载器,并且与项目相关的 scss 文件工作正常,但是如果我在 stories index.ts 文件中导入 scss 文件,则不会加载该文件。
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
检查故事书运行情况。
我做错了什么??
最佳答案
我假设您和我一样,正在寻找一种将全局样式从 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 配置而烦恼。希望这能解决您的问题!
关于javascript - @storybook/angular 无法在故事索引上加载 scss 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48795872/