有没有办法将本地 svg 文件包含在我与自定义 Angular 库一起使用的故事书中?

Question

我无法让我的任何本地 svg 文件显示在故事书中。

我已经将一条新规则推送到 Storybook 的 webpack 配置文件中 main.js 在 .storybook 文件夹下，并且正在对 svg 文件使用 svg-inline-loader(已安装(。

config.module.rules.push({
test: /.svg$/,
include: path.resolve(__dirname, './'),
use: [{
loader: 'svg-inline-loader'
}],
});

我尝试编辑 package.json 以允许 -s 标志，并传入一个参数，该参数直接指向包含 svg 文件的 assets 文件夹。

我在网络转换器上得到 404 回报

Request URL: http://localhost:6006/assets/icon.svg
Request Method: GET
Status Code: 404 Not Found

尝试创建自定义.d.ts

declare module "*.svg" {
const content: string;
export default content;
}
declare module "svg-inline-angular" 

并尝试将其添加到 .storybook 文件夹中的 tsconfig.json 中，但也没有运气

我尝试的最新方法是添加import '!svg-inline-loader!../filepath_to_assets，但这也空了

我已经在一个普通的应用程序中完成了这个，并且在 angular.json 文件中包含了 assets 对象数组中的 assets 文件夹。这适用于导入我的 svg 文件，但在库中不起作用

有什么想法吗？谢谢

Answer 1

问题是 Storybook 的加载器与您的自定义 Webpack 配置添加的加载器冲突。

您可以尝试使用svg-inline-loader的故事书预设内联svg，也可以手动过滤掉与您的规则冲突的规则。

像这样：

config.module.rules = [
// Turn off the default SVG file-loader
...config.module.rules.map(rule => {
if (/svg/.test(rule.test) && /file-loader/.test(rule.loader)) {
return { ...rule, exclude: /.svg$/i }
}
return rule
)},
// Add your own SVG loader
{
test: /.svg$/,
include: path.resolve(__dirname, './'),
use: [{
loader: 'svg-inline-loader'
}]
}
]

Answer 2

如果您转到".storybook/main.js"并添加到module.export，则以下内容："staticDirs":[{from:'route-to-your-assets (e.g projects/library/icons)', to: '/assets' }],它会将文件夹复制到资产