web-dev-qa-db-ja.com

「ストーリーブックjs」で静的ファイルを提供する

ストーリーブックのドキュメントを使用していて、assetsフォルダーから画像を読み込めませんでした。ドキュメントが言うように：「カスタム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

ストーリーブックのドキュメントから何かが欠けているようです、または私は何か間違っています：？この問題を解決してくれる人に感謝します。 ^ _ ^

reactjstypescriptwebpackstorybook
5
Vano

ストーリーブック開始スクリプトで静的フォルダーを構成すると、うまくいきました。

ドキュメント： ディレクトリを介した静的ファイル

Storybookの起動時に静的コンテンツを検索するためのディレクトリ（またはディレクトリのリスト）を構成することもできます。これは、-sフラグを使用して行うことができます。

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public -p 9001"
  }
}

幸運を...

2
Akash

それを修正するには：

次のフォルダー構造があります????????

# root_folder

.storybook/
src/
package.json
...
...

私の画像フォルダはsrc/resources/images/my_image.jpg内にあります

次のように-s ./を追加して修正しました????????

"storybook": "start-storybook -s ./ -p 9001"

:) ????????

0
Omar Zeidan