Сборник рассказов загрузить изображение из CSS - PullRequest
Новая
       20

Сборник рассказов загрузить изображение из CSS

0 голосов
/ 18 июня 2019

Я пытаюсь запустить Storybook с пользовательской конфигурацией Webpack, и он помещает файлы изображений (в данном случае SVG) в неправильное место;SVG выводится в storybook-static/[filehash].svg, но CSS изменяется в static/media/[filename].svg.Там есть файл, но его содержимое:

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

По какой-то причине он помещает модуль CommonJS в нужное место, но загрузчик css (или что-то вpipe) заставляет его смотреть на модуль, а не на настоящий файл.

Вот мой .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 Ответ

0 голосов
/ 20 июня 2019

Исправлено, удалив мое собственное правило file-loader (у Сборника рассказов, очевидно, есть свое собственное)

...