故事书从css加载图像

Posted 2023-02-19

【中文标题】故事书从css加载图像

【英文标题】：storybook load image from css

【发布时间】：2019-10-31 15:22:03

【问题描述】：

我正在尝试使用自定义 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;
;

【参考方案1】：

通过删除我自己的 file-loader 规则来修复它（故事书显然有自己的）

【讨论】：

非常感谢。你救了我一天。