我正在使用故事书文档,无法从assets文件夹加载图像。正如documentations所说:“如果您使用自定义Webpack配置,您需要将文件加载器添加到自定义Webpack配置中”-我的webpack.config文件看起来像:
const path = require('path');
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
});
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
},
],
});
config.module.rules.push({
test: /\.(svg|png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
]
},);
config.resolve.extensions.push('.ts', '.tsx')
return config;
};
字符串
package.json:
"react": "^16.10.1",
"react-dom": "^16.10.1",
"typescript": "^3.6.3",
"@storybook/react": "^5.2.1",
"@types/storybook__react": "^4.0.2",
"file-loader": "^4.2.0"
型
这是在Yarn故事书x1c 0d1x之后
似乎故事书文档中缺少了一些东西,或者我做错了什么:?谢谢你,谁能帮我解决这个问题。^_^
4条答案
按热度按时间js81xvg61#
在storybook-start脚本中配置静态文件夹对我来说很有效:
文档:静态文件通过目录
您还可以配置一个目录(或目录列表),以便在启动Storybook时搜索静态内容。
字符串
祝你好运...
qqrboqgw2#
如果有人遇到同样的问题,尝试下面的代码(我使用:故事书,React-没有创建React应用程序, typescript ):
第一个问题是关于typescript的,这是对我有用的:我在根文件夹中创建了自定义.d.ts文件,并将此代码放入其中:
字符串
然后我将这个文件添加到tsll.json中,如下所示:
型
在那之后,错误-“couldn 't find imageName.svg”消失了,但是svg-inline-react仍然没有显示图标,现在问题在'webpack.js.js'文件中,下面写了修复代码。
型
^_^
pokxtpni3#
修复方法:
我的文件夹结构如下
字符串
我的图像文件夹位于
src/resources/images/my_image.jpg
中我通过添加
-s ./
修复了这个问题,型
希望有帮助:)💃🏻
vshtjzan4#
在最新版本的Storybook中(撰写本文时为版本7),推荐使用
staticDirs
配置元素。示例:字符串
我在从故事书版本6升级到版本7时偶然发现了这一点,以前我在CLI中使用
-s
,现在已经被删除了。Source