web-dev-qa-db-fra.com

Servir des fichiers statiques dans "storybook js"

J'utilise la documentation du livre d'histoires et je n'ai pas pu charger les images du dossier des ressources. Comme le dit la documentation: "si vous utilisez une configuration Webpack personnalisée, vous devez ajouter le chargeur de fichiers dans votre configuration Webpack personnalisée" - et mon fichier webpack.config ressemble à:

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"

C'est après le livre de contes de fils webpack-debug

semble que quelque chose manque dans la documentation des livres d'histoires, ou je fais quelque chose de mal:? merci à tous ceux qui peuvent m'aider avec ce problème. ^ _ ^

reactjstypescriptwebpackstorybook
5
Vano

La configuration du dossier statique dans le script de démarrage du livre de contes a fonctionné pour moi:

Documentation: Fichiers statiques via le répertoire

Vous pouvez également configurer un répertoire (ou une liste de répertoires) pour rechercher du contenu statique lorsque vous démarrez Storybook. Vous pouvez le faire avec le drapeau -s.

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

Bonne chance...

2
Akash

Pour résoudre ce problème:

J'ai la structure de dossiers suivante ????????

# root_folder

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

Et mon dossier d'images vit à l'intérieur src/resources/images/my_image.jpg

J'ai corrigé cela en ajoutant le -s ./ en date des ????????

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

J'espère que cela pourra aider :) ????????

0
Omar Zeidan