Storybook: Comment puis-je utiliser les styles de framework CSS dans un livre de contes

Oui, ça l'est. Lire ici - https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md

Ce n'est pas ce dont vous avez besoin, rouvrez-le.

MISE À JOUR 17/08/2017 (@hypnos)
https://storybook.js.org/configurations/add-custom-head-tags/

Le lien est rompu et je ne le trouve pas dans le fichier du master actuel.

Vérifiez ceci: https://getstorybook.io/docs/configurations/custom-webpack-config

MISE À JOUR 17/08/2017 (@hypnos)
https://storybook.js.org/configurations/custom-webpack-config/

Merci. Un moyen plus simple était d'ajouter un fichier head.html dans le répertoire ".storybook" avec le éléments pour Bootstrap ou l'interface utilisateur sémantique

MISE À JOUR 17/08/2017 (@hypnos)
Maintenant c'est preview_head.html

Merci méthode head.html fonctionne parfaitement!

Head.html serait-il également la meilleure façon de procéder si le fichier que vous ajoutez n'est pas servi via une URL mais est plutôt hébergé localement? comment cela fonctionnerait-il?

Les deux liens sont rompus.

Désolé pour les liens cassés, c'est malheureusement le résultat de notre restructuration, le seul moyen de trouver est par recherche.

Que recherchez-vous / avez-vous besoin d'aide avec @kirkstrobeck ? Ce problème est assez ancien et fermé.
Si vous rencontrez un problème spécifique avec lequel nous pouvons vous aider, faites-le nous savoir 👍.

J'ai atterri ici en essayant de comprendre comment intégrer React Storybook dans une vraie application où tous nos styles sont dans des fichiers scss dans app/assets/stylesheets

Vous devrez étendre notre configuration webpack / fournir votre propre configuration webpack personnalisée.

Dans ce document, vous devrez indiquer à Webpack ce qu'il doit faire avec les fichiers .scss . aka, vous devez ajouter le sass-loader .

Vous avez probablement déjà cette configuration pour votre application, et vous pouvez principalement copier-coller à partir de sa configuration Webpack?

trouvé dans la documentation: https://storybook.js.org/configurations/default-config/#css -support

@arunoda serait-il possible de supprimer ci-dessus deux liens qui ont confondu le visage que j'ai marqué ci-dessus? gagner du temps pour les autres qui entreront sur cette page à l'avenir. Merci!

Les réactions confuses suffisent probablement. Je les ai aussi votés.

Je viens de mettre à jour les commentaires avec des liens obsolètes

Le fichier d'en-tête du livre d'histoire s'appelle preview-head.html Référence:
https://storybook.js.org/configurations/add-custom-head-tags/

Dans mon application "principale", mes styles globaux sont définis dans un fichier JS qui exporte une chaîne de modèle contenant toutes les règles CSS globales.
Existe-t-il un moyen d'ajouter une chaîne de modèle avec des définitions CSS à l'iframe dans laquelle les histoires sont rendues?

ÉDITER:
Depuis que j'utilise des composants de style react, j'utilise maintenant simplement leur assistant injectGlobal .

@flavordaaave Je pense que vous voudrez utiliser simplement injecter les styles dans un style-tag de config.js

@ndelangen Jusqu'à présent, toutes les possibilités d'injection de style global ( import './styles.css'; ou via preview-head.html ) ne me permettent pas d'injecter des styles avec des paramètres dynamiques.

Mes styles ressemblent à ceci:

/* .storybook/config.js */

import theme from './theme'

export default `
html {
  font-family: Helvetica;
  background: ${theme.canvas_ground};
  ...
}
`

Donc pour l'instant j'utilise l'aide injectGlobal de react-styled-components comme mentionné dans mon EDIT ci-dessus.

/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'

injectGlobal`${styles}`
...

vous pouvez obtenir un résultat similaire avec ceci:

// create a <style></style> DOM element
const styleElement = document.createElement('style')
// put the text from styles variable between opening and closing <style> tags
styleElement.appendChild(document.createTextNode(styles))
// place the style element inside <head>
document.head.appendChild(styleElement)

Salut!
J'essaye de lier ma feuille de style à Storybook et je raye.

J'ai suivi ces instructions pour importer mon fichier CSS (qui vit dans static/style.css dans la racine de mon projet) avec cette ligne: import '../static/style.css'; . Cela a abouti à une erreur avec r

Error: Can't resolve '../i/link.svg' in [path]

Je ne veux pas avoir à passer par tout ce rigamarole pour réconcilier chaque ressource référencée en externe dans ma feuille de style, alors j'ai pensé essayer une manière différente.

J'ai ajouté un preview-head.html pour ces documents , en reliant ma feuille de style comme suit:

<link rel="stylesheet" href="./static/style.css" />

Cela entraîne cependant une erreur 404 pour la ressource. Je pense que c'est peut-être juste un problème de chemin, mais je n'arrive pas à trouver le chemin que je devrais utiliser par rapport à l'endroit où Storybook est en cours d'exécution. Des idées?

Si vous obtenez des 404 parce que votre CSS n'est pas sur un CDN, vous pouvez passer un paramètre supplémentaire pour exécuter Storybook avec un dossier statique et référencer vos fichiers comme simplement ./some.css . Exécutez storybook -p 9001 -s ./a-static-folder et mettez votre css dans ce dossier.

Merci pour la suggestion, @nickytonline. Malheureusement, cela ne semble pas fonctionner. J'ai mes fichiers dans static/style.css et j'ai exécuté la commande storybook -p 9001 -s ./static . Cela a abouti à storybook: command not found . J'ai exécuté npm run storybook -p 9001 -s ./static qui a fonctionné, mais a quand même entraîné une erreur 404 sur ma feuille de style.

@bradfrost , juste pour clarification, lorsque vous exécutez npm run storybook -p 9001 -s ./static , ./static agit comme / dans un livre d'histoires, donc si votre fichier est dans static/styles.css dans votre projet, votre lien serait <link rel="stylesheet" href="./styles.css" /> non <link rel="stylesheet" href="./static/styles.css" />

@nickytonline Oui, j'avais des choses liées comme <link rel="stylesheet" href="./styles.css" /> .

@bradfrost cela me dépôt très basique en utilisant create-react-app et la CLI du livre de contes. Il montre un exemple d'actif statique utilisé dans un livre d'histoires référencé via une balise <link /> . Il est disponible ici, https://github.com/nickytonline/for-brad

Vous pouvez voir la feuille de style référencée ici, https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1

@nickytonline Merci beaucoup pour le projet de démonstration! J'apprécie vraiment cela.

Le problème que je rencontre toujours est reflété dans mon article d'origine , qui est l'utilisation de import pour intégrer les styles au projet. Cette méthode génère malheureusement des erreurs si les éléments tels que les polices, les icônes ou les images d'arrière-plan ne sont pas résolus. Je me rends compte qu'il existe des moyens de remédier à cela, mais je suppose que je cherche simplement à lier une feuille de style dans la tête de mon document à l'ancienne.

Désolé, c'est dommage de ne pas avoir absorbé tout le contenu de votre message d'origine . C'est tout à fait le cornichon si vous voulez éviter le rigamarole . Je vais devoir y penser un peu.

Ce que vous pouvez faire est de créer un dossier «public» dans le dossier racine.
dans le dossier 'public / semantic' pest le contenu de 'node_modules / semantic-ui-css'.
dans package.json => scripts => storybook => ajouter '' -s ./public "
dernière chose!!! dans votre fichier .less de composant, faites @import '/semantic/semantic.min.css';
maintenant, Icon devrait fonctionner correctement.

Pour Storybook v5 et normalize.css "framework", il suffit d'ajouter import "normalize.css"; intérieur du fichier .storybook/config.js .

@jmarceli Cela fonctionne pour moi, merci beaucoup!

Est-ce toujours une option viable avec la v6?

Pour Storybook v5 et normalize.css "framework", il suffit d'ajouter import "normalize.css"; intérieur du fichier .storybook/config.js .

@snyderhaus oui, mais depuis 5.3 config.js est obsolète et nous vous suggérons fortement d'utiliser preview.js place. Plus d'informations:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs-configuration

Je suis venu à plusieurs reprises sur ce fil pour de nombreux projets! Donc, c'est pour ma propre référence ainsi que pour n'importe qui d'autre.

Cela a fonctionné pour moi.

// storybook/config.js

import 'semantic-ui-css/semantic.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import '!style-loader!css-loader!sass-loader!../client/scss/style.scss';

my style.scss remplace le thème de bootstrap par défaut en utilisant des variables sass

J'ai pu utiliser la configuration Webpack par défaut des storybooks et simplement référencer les feuilles de style comme ceci, en utilisant en plus la syntaxe du chargeur en ligne pour mes fichiers sass , comme indiqué dans la documentation .

"babel-core": "6.26.0",
"babel-loader": "7.1.4",
"@storybook/react": "^5.3.14",
"sass-loader": "^8.0.2",
"css-loader": "^3.4.2",
"style-loader": "0.20.3",
"react": "^16.3.2",

Pour toute personne utilisant la v6 +, la solution utilisant config.js ne fonctionnera pas.

J'ai réussi à le faire fonctionner comme ça:

• créer un fichier nommé preview.js dans le dossier .storybook
• importer le css externe. Dans mon cas, il s'agissait de fichiers scss, je les ai donc importés comme ceci:

// .storybook/preview.js

import '!style-loader!css-loader!sass-loader!@company/framework/src/styles.sass'
import '!style-loader!css-loader!sass-loader!./cssoverrides.sass'

La deuxième importation a été ajoutée pour remplacer certains styles globaux par défaut.

Ma structure de dossiers:

.storybook
│   cssoverrides.sass
│   main.js  
│   preview.js

Forfaits utilisés:

"@storybook/react": "^6.0.0",
"react": "^16.13.1",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"sass-loader": "^9.0.3",
"css-loader": "^4.2.1",
"style-loader": "^1.2.1"

Ce qui a fonctionné pour moi était d'importer bootstrap sur ./storybook/preview.js

//I added this:
import 'bootstrap-4-grid/css/grid.min.css';

//this was already there
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

https://storybook.js.org/docs/react/configure/styling-and-css#importing -css-files