2

我添加@storybook/preset-create-react-app到我的插件中，因为我希望故事书与 React/CRA 一起使用。基本上，我正在尝试以与 CRA 相同的方式导入 SVG。

import SomeSvgStaticUrl, { ReactComponent as SomeSvgReactComponent } from '../assets/icons/some-icon.svg';

SomeSvgStaticUrl- 默认情况下工作正常（返回字符串静态 URL，可以正常工作<img src={SomeSvgStaticUrl} />，但不是我想要的）

SomeSvgReactComponent-undefined默认情况下

所以，我决定更新 webpack 配置来添加一个 SVG 加载器，

webpackFinal: async config => {
    console.log(config.module.rules);
    // const assetRule = config.module.rules.find(({ test }) => test.test(".(svg"));
    // const assetLoader = {
    //     loader: assetRule.loader,
    //     options: assetRule.options || assetRule.query
    // };
    config.module.rules.unshift({
        test: /\.svg$/,
        use: ['@svgr/webpack'] // ['@svgr/webpack', assetLoader],
    });
    config.module.rules = [{ oneOf: config.module.rules }];
    return config;
},

就像故事书的魅力一样，但默认导入（SomeSvgStaticUrl在这种情况下），它返回 ReactComponent 而不是静态 URL。并且SomeSvgReactComponent是undefined。没问题，但是当宿主应用程序使用具有默认 React/CRA 配置的包时，它不起作用。主机应用程序获得以下内容，

SomeSvgStaticUrl- 静态网址

SomeSvgReactComponent- 反应组件

如果我从包中删除 SVG 加载器，它在主机应用程序上运行良好，但不适用于故事书。当我保留 SVG 加载器时，它可以很好地与故事书一起使用，但不能与主机应用程序一起使用。

我真的不想强制所有主机应用程序通过他们的 webpack 配置使用相同的 SVG 加载器。关于做什么的任何帮助或让故事书 SVG 加载器以与 React/CRA 加载器相同的方式工作的最佳方法是什么？

套餐详情

"react": "^17.0.2",
"react-scripts": "^5.0.0",
"@storybook/addon-essentials": "^6.4.14",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.4.14",
"@storybook/addons": "^6.4.14",
"@storybook/builder-webpack5": "^6.4.14",
"@storybook/manager-webpack5": "^6.4.14",
"@storybook/preset-create-react-app": "^4.0.0",
"@storybook/react": "^6.4.14",
"@svgr/webpack": "^6.2.0",
"tsdx": "^0.14.1",
4

0 回答 0