Storybook avec Tailwind - L'image d'arrière-plan de Tailwind n'est pas résolue

Question

Les images d'arrière-plan Tailwind ont la syntaxe suivante :

backgroundImage: (theme) => ({
"drop-arrow": "url('/res/public/images/drop_down_arrow.svg')",
...
})

où /res se trouve en dehors du dossier ../www/www/res.. mais utilise l'url pour résoudre sur le Web. Ce projet est déjà assez vaste et je voulais présenter le livre de contes. J'ai ajouté le package @storybook/addon-styling et terminé le guide de configuration. Lorsque vous essayez de créer le livre d'histoires, il ne peut pas analyser les images car elles se trouvent dans un autre dossier.

J'ai essayé de renommer "drop-arrow": "url('/res/public/images/drop_down_arrow.svg')", arriver “drop-arrow”：“url（'../www/www/res/public/images/drop_down_arrow.svg'）”，. Il y a des progrès, mais je ne veux pas y toucher car cela pourrait casser quelque chose. Est-il possible d'utiliser une configuration Tailwind personnalisée pour le livre de contes ou d'analyser correctement les ressources ?

Answer 1

J'ai également rencontré le même problème et essayé de nombreuses méthodes mais sans succès. Avez-vous trouvé une solution?

J'ai ce thème d'extension d'image dans tailwind.config.js :

backgroundImage: {
    'grid': "url('/img/bg-grid.png')",
}

Si je supprime la pseudo-fonction url, le livre d'histoires démarrera mais arrêtera de traiter l'arrière-plan de la page.