React Storybook 不显示 SVG 图标

Question

我无法在 Storybook 中看到 SVG 图标。我是前端开发的新手，所以不确定我做错了什么。我参考了这篇文章https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004。这是文件webpack.config.js

const path = require('path');

const rootDir = path.resolve(__dirname, '../src');

const pathToInlineSvg = path.resolve(__dirname, '../src/assets/images/icons');

module.exports = ({ config, mode }) => {

  const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg'));
  fileLoaderRule.exclude = pathToInlineSvg;

  config.module.rules = config.module.rules.map(rule => {
    if (rule.exclude && rule.test.test('styles.scss')) {
      rule.use = rule.use.map(use => {
        if (use && use.loader && use.loader.indexOf('sass-loader') !== -1) {
          use.options.data = `
            @import "@/assets/styles/theme.scss";
            @import "@/assets/styles/fonts.scss";
          `;
        }
        return use;
      });
    }
    return rule;
  });

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });

  config.module.rules.push({
    test: /\.(jsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: ["@babel/preset-env", "@salesforce/babel-preset-design-system-react"],
    },
  });

  config.module.rules.push({
    test: /\.svg$/,
    include: pathToInlineSvg,
    use: [{loader: '@svgr/webpack',
              options: {
                icon: true,
              },
          }
    ],
  });

  config.resolve.extensions.push('.ts', '.tsx', '.svg');
  config.resolve.alias['@'] = rootDir;

  return config;
};

Answer 1

使用storybook-preset-inline-svg。

Storybook 配置的加载器与您在自定义 Webpack 配置中定义的内容冲突，因此如果您不覆盖这些加载器，那么您的自定义规则将不起作用。

这是覆盖一些默认 SVG 加载器的基本方法（根据您的需要进行调整）：

config.module.rules = [
  ...config.module.rules.map(rule => {
    if (/svg/.test(rule.test)) {
      // Silence the Storybook loaders for SVG files
      return { ...rule, exclude: /\.svg$/i }
    }
  },
  // Add your custom SVG loader
  {
    test: /\.svg$/i,
    use: ['whatever-loader-you-want']
  }
]

根据您的设置，您可能还需要查看 Storybook preset API for Webpack 以覆盖管理器条目的加载器。

Answer 2

在最新的故事书中，解决方案如下： 将package.json 上的脚本设置为

"scripts": {
  "storybook": "start-storybook -p 6006 --no-dll -s ./public",
}

Answer 3

SVG 未在您的设置中加载到 Storybook 中，因为 Storybook 的默认 webpack 配置已经有一个 .svg 加载器，并且正在使用 file-loader。

见Line 65 - Line 68 of Storybook base-webpack.config.js

如果你想使用@svgr/webpack loader，你需要write a custom webpack config，这样@svgr/webpack loader 规则就在file-loader之前。

此 webpack 配置规则在任何其他资产加载器之前添加 @svgr/webpack 加载器：

  // Add SVGR Loader
  // ========================================================
  // Remove svg rules from existing webpack rule
  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', assetLoader],
  });

你可以在这个Gatsby starter (Gatsby + TypeScript + Emotion + Storybook)看到一个完整的webpack.config.js