Обслуживание статических файлов в "storybook js" - PullRequest
Новая
       23

Обслуживание статических файлов в "storybook js"

4 голосов
/ 07 октября 2019

Я использую документацию к сборнику рассказов и не могу загрузить изображения из папки ресурсов. Как сказано в документации: «если вы используете пользовательскую конфигурацию Webpack, вам нужно добавить загрузчик файлов в свою пользовательскую конфигурацию Webpack» - и мой файл webpack.config выглядит следующим образом: 

const path = require('path');


 module.exports = ({ config }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });
 config.module.rules.push({
   test: /\.(ts|tsx)$/,
   use: [
     {
       loader: require.resolve('awesome-typescript-loader'),
     },
   ],
 });
 config.module.rules.push({
   test: /\.(svg|png|jpe?g|gif)$/i,
   use: [
     {
       loader: 'file-loader',
     },
    ]
  },);

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


  return config;
};

package.json: 

"react": "^16.10.1",
"react-dom": "^16.10.1",
"typescript": "^3.6.3",
"@storybook/react": "^5.2.1",
"@types/storybook__react": "^4.0.2",
"file-loader": "^4.2.0"

Это после сборника рассказов пряжи webpack-debug

похоже, что-то отсутствует в документации сборника рассказов, или я что-то не так делаю:? Спасибо, кто может помочь мне с этой проблемой. ^ _ ^

1 Ответ

2 голосов
/ 13 октября 2019

Если кто-то сталкивался с той же проблемой, попробуйте код ниже (я использую: сборник рассказов, реагирование - без создания приложения реагирования, машинопись):

Первый вопрос касался машинописи, и вот что сработало для меня:создал файл custom.d.ts в корневой папке и поместил этот код внутри: 

declare module "*.svg" {
  const content: string;
  export default content;
}

declare module "svg-inline-react"

Затем я добавляю этот файл в tsconfig.json следующим образом: 

"files": [
  "./custom.d.ts"
],

После этого ошибка- «не удалось найти imageName.svg» исчез, но svg-inline-реагировать по-прежнему не показывал значок, теперь проблема была внутри файла «webpack.config.js», исправленный код написан ниже. 

const path = require('path');

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

  config.module.rules = config.module.rules.map( data => {
    // This overrides default svg rouls of storybook, and after that we can use 
   //svg-inline-loader.
    if (/svg\|/.test( String( data.test ) ))
      data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani) 
 (\?.*)?$/;
    return data;
  });

    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      });
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('awesome-typescript-loader'),
        },
      ],
    });
    config.module.rules.push({
      test: /\.svg$/,
      include: path.resolve(__dirname, '../'),
      loader: 'svg-inline-loader'
    });

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

^ _ ^

...