Question

我正在尝试使用自定义的Webpack配置运行Storybook，并且它将图像文件（在这种情况下为SVG）放在错误的位置； SVG输出到storybook-static/[filehash].svg，但是CSS更改为在static/media/[filename].svg中查找。那里有一个文件，但是它的内容是：

module.exports = __webpack_public_path__ + "[filehash].svg";

因此出于某种原因，它会将CommonJS模块放置在正确的位置，但是css-loader（或管道中的某些内容）却告诉它查看模块而不是实际文件。

这是我的.storyboox/webpack.config.js：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = ({ config }) => {
  config.plugins.push(
    new MiniCssExtractPlugin(),
  );

  config.module.rules.push(
    {
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
        },
      ],
    },
    {
      test: /\.(svg|jpe?g|png)$/,
      use: [
        {
          loader: require.resolve('file-loader'),
        },
      ],
    },
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        // require.resolve("style-loader"),
        {
          loader: require.resolve("css-loader"),
          options: {
            importLoaders: 1,
          },
        },
        {
          loader: require.resolve("sass-loader"),
          options: {
            sourceMap: true,
            data: '$theme-image-path: null;',
          },
        }
      ]
    },
  );

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

Answer 1

通过删除我自己的file-loader规则（Storybook显然具有自己的规则）来解决该问题

故事书从CSS加载图像

1 个答案: