Storybook: Wie kann ich CSS-Framework-Stile in einem Storybook verwenden?
Angenommen, meine Anwendung basiert auf einem CSS-Framework wie Semantic UI, Bootstrap oder ähnlichem. Wie kann ich diese Stile einfach in ein Storybook integrieren, damit meine Komponenten korrekt angezeigt werden?
croogie
Alle 35 Kommentare
Ja, so ist es. Lesen Sie hier - https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md
Ich, das ist nicht was du brauchst, öffne es einfach wieder.
UPD 2017-08-17 (@hypnos)
https://storybook.js.org/configurations/add-custom-head-tags/
arunoda
am 3. Apr. 2016
Der Link ist defekt und ich kann ihn in der Datei im aktuellen Master nicht finden.
andrioid
am 19. Okt. 2016
Überprüfen Sie dies: https://getstorybook.io/docs/configurations/custom-webpack-config
UPD 2017-08-17 (@hypnos)
https://storybook.js.org/configurations/custom-webpack-config/
arunoda
am 19. Okt. 2016
Vielen Dank. Eine einfachere Möglichkeit war das Hinzufügen einer Datei head.html im Verzeichnis ".storybook" mit dem Elemente für Bootstrap oder Semantic UI
UPD 2017-08-17 (@hypnos)
Jetzt ist es preview_head.html
andrioid
am 19. Okt. 2016
Danke head.html Methode funktioniert perfekt!
wmhafiz
am 14. Nov. 2016
Wäre head.html auch der beste Weg, wenn die Datei, die Sie hinzufügen, nicht über eine URL bereitgestellt, sondern lokal gehostet wird? Wie würde das funktionieren?
felipecocco
am 10. Dez. 2016
Beide Links sind defekt.
kirkstrobeck
am 17. Mai 2017
Entschuldigung für die defekten Links, dies ist leider das Ergebnis unserer Umstrukturierung. Der einzige Weg, dies zu finden, ist die Suche.
Was suchst / brauchst du Hilfe bei @kirkstrobeck ? Diese Ausgabe ist ziemlich alt und geschlossen.
Wenn Sie ein bestimmtes Problem haben, bei dem wir Ihnen helfen können, lassen Sie es uns wissen 👍.
ndelangen
am 17. Mai 2017
Ich bin hier gelandet und habe versucht herauszufinden, wie ich React Storybook in eine echte Anwendung integrieren kann, in der sich alle unsere Stile in scss-Dateien in app/assets/stylesheets
sergiotapia
am 24. Mai 2017
Sie müssen unsere Webpack-Konfiguration erweitern / Ihre eigene Webpack-Konfiguration bereitstellen.
Darin müssen Sie dem Webpack mitteilen, was mit den .scss -Dateien zu tun ist. aka, müssen Sie die sass-loader hinzufügen.
Wahrscheinlich haben Sie dieses Setup bereits für Ihre App eingerichtet und können es größtenteils aus der Webpack-Konfiguration kopieren und einfügen?
ndelangen
am 24. Mai 2017
in der Dokumentation zu finden: https://storybook.js.org/configurations/default-config/#css -support
blairanderson
am 16. Juni 2017
@arunoda wäre es möglich, über zwei Links zu entfernen, die das Gesicht, das ich oben markiert habe, verwirrt haben? Sparen Sie Zeit für andere, die diese Seite in Zukunft betreten. Vielen Dank!
achenwei-chwy
am 16. Aug. 2017
Die verwirrten Reaktionen sind wahrscheinlich genug. Ich habe sie auch positiv bewertet.
kirkstrobeck
am 16. Aug. 2017
Habe gerade die Kommentare mit veralteten Links aktualisiert
Hypnosphi
am 17. Aug. 2017
Die Header-Datei für das Storybook heißt preview-head.html Referenz:
https://storybook.js.org/configurations/add-custom-head-tags/
LukasMac
am 24. Aug. 2017
In meiner "Haupt" -App werden meine globalen Stile in einer JS-Datei definiert, die eine Vorlagenzeichenfolge exportiert, die alle globalen CSS-Regeln enthält.
Gibt es eine Möglichkeit, dem Iframe, in dem die Storys gerendert werden, eine Vorlagenzeichenfolge mit CSS-Definitionen hinzuzufügen?
BEARBEITEN:
Da ich Komponenten im React-Stil verwende, verwende ich jetzt nur deren injectGlobal -Helfer.
flavordaaave
am 14. Nov. 2017
@flavordaaave Ich denke, Sie möchten einfach die Stile in ein Style-Tag aus config.js einfügen
ndelangen
am 14. Nov. 2017
@ndelangen Bisher erlauben mir alle Möglichkeiten zum import './styles.css'; oder über preview-head.html ) nicht das Einfügen von Stilen mit dynamischen Parametern.
Meine Styles sehen ungefähr so aus:
/* .storybook/config.js */
import theme from './theme'
export default `
html {
font-family: Helvetica;
background: ${theme.canvas_ground};
...
}
`
Im Moment verwende ich also den injectGlobal -Helfer von react-styled-components wie oben in meiner EDIT erwähnt .
/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'
injectGlobal`${styles}`
...
Sie können ein ähnliches Ergebnis damit erzielen:
// 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)
Hallo!
Ich versuche, mein Stylesheet mit Storybook zu verknüpfen, und bin auffällig.
Ich habe diese Anweisungen befolgt, um meine CSS-Datei (die sich in static/style.css in meinem Projektstamm befindet) mit folgender Zeile zu importieren: import '../static/style.css'; . Das führte zu einem Fehler mit r
Error: Can't resolve '../i/link.svg' in [path]
Ich möchte nicht all diese Rigamarole durchgehen müssen, um jede extern referenzierte Ressource in meinem Stylesheet
Ich habe für diese Dokumente ein preview-head.html hinzugefügt und mein Stylesheet wie folgt verknüpft:
<link rel="stylesheet" href="./static/style.css" />
Dies führt jedoch zu einem 404-Fehler für die Ressource. Ich denke, es könnte nur ein Pfadproblem sein, aber ich kann anscheinend nicht finden, welchen Pfad ich verwenden sollte, relativ zu dem Ort, an dem Storybook ausgeführt wird. Irgendwelche Ideen?
bradfrost
am 28. März 2018
Wenn Sie 404s erhalten, weil sich CSS nicht auf einem CDN befindet, können Sie einen zusätzlichen Parameter übergeben, um Storybook mit einem statischen Ordner auszuführen und Ihre Dateien als nur ./some.css referenzieren. Führen Sie storybook -p 9001 -s ./a-static-folder und legen Sie Ihr CSS in diesem Ordner ab.
nickytonline
am 29. März 2018
Danke für den Vorschlag, @nickytonline. Leider schien das nicht zu funktionieren. Ich habe meine Dateien in static/style.css und habe den Befehl storybook -p 9001 -s ./static . Das ergab storybook: command not found . Ich habe npm run storybook -p 9001 -s ./static was jedoch zu einem 404-Fehler in meinem Stylesheet geführt hat.
bradfrost
am 29. März 2018
@bradfrost , nur zur Verdeutlichung: Wenn Sie npm run storybook -p 9001 -s ./static ausführen , ./static wie / im Storybook. Wenn sich Ihre Datei also in Ihrem Projekt in static/styles.css , Ihr Link wäre <link rel="stylesheet" href="./styles.css" /> nicht <link rel="stylesheet" href="./static/styles.css" />
nickytonline
am 29. März 2018
@nickytonline Ja , ich hatte Dinge als <link rel="stylesheet" href="./styles.css" /> verknüpft.
bradfrost
am 29. März 2018
@bradfrost das hat mich <link /> -Tag verwiesen wird. Es ist hier verfügbar, https://github.com/nickytonline/for-brad
Das Stylesheet, auf das verwiesen wird, finden Sie hier unter https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1
nickytonline
am 3. Apr. 2018
@nickytonline Vielen Dank für das Demo-Projekt! Ich weiß das wirklich zu schätzen.
Das Problem, auf das ich immer noch stoße, spiegelt sich in meinem ursprünglichen Beitrag wider, nämlich der Verwendung von import , um die Stile in das Projekt zu integrieren. Diese Methode löst leider Fehler aus, wenn Elemente wie Schriftarten oder Symbole oder Hintergrundbilder nicht aufgelöst werden. Mir ist klar, dass es Möglichkeiten gibt, dies zu beheben, aber ich denke, ich möchte nur ein Stylesheet im Kopf meines Dokuments auf die altmodische Weise verknüpfen.
bradfrost
am 8. Apr. 2018
Tut mir leid, dass ich nicht den gesamten Inhalt Ihres ursprünglichen Beitrags aufgenommen habe . Das ist schon die richtige Wahl, wenn Sie die wollen . Ich muss ein bisschen darüber nachdenken.
nickytonline
am 8. Apr. 2018
Sie können einen "öffentlichen" Ordner im Stammordner erstellen.
im Ordner 'public / semantic' den Inhalt von 'node_modules / semantic-ui-css' schädigen.
in package.json => scripts => storybook => füge '' -s ./public hinzu "
letztes Ding!!! Führen Sie in der .less-Datei Ihrer Komponente @import '/semantic/semantic.min.css' aus.
Jetzt sollte Icon reibungslos funktionieren.
amos80m
am 8. Jan. 2019
Für Storybook v5 und normalize.css "Framework" reicht es aus, nur import "normalize.css"; in die Datei .storybook/config.js einzufügen.
jmarceli
am 6. Mai 2019
@jmarceli Es funktioniert bei mir, vielen Dank!
anton-paskanny
am 17. Mai 2019
Ist dies mit Version 6 noch eine praktikable Option?
Für Storybook v5 und
normalize.css"Framework" reicht es aus, nurimport "normalize.css";in die Datei.storybook/config.jseinzufügen.
snyderhaus
am 30. März 2020
@snyderhaus ja, obwohl seit 5.3 config.js sanft veraltet ist und wir dringend empfehlen, stattdessen preview.js verwenden. Mehr Info:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs-configuration
shilman
am 31. März 2020
Ich bin mehrfach für zahlreiche Projekte zu diesem Thread gekommen! Das ist also sowohl für meine eigene Referenz als auch für alle anderen.
Das hat bei mir funktioniert.
// 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';
Mein style.scss überschreibt das Standard-Bootstrap-Design mithilfe von Sass-Variablen
Ich konnte die Standard-Webpack-Konfiguration von Storybooks verwenden und einfach auf die Stylesheets verweisen, wobei ich zusätzlich die Inline-Loader-Syntax für meine sass -Dateien verwendete, wie in den Dokumenten gezeigt .
"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",
scottc11
am 5. Apr. 2020
Für alle, die v6 + verwenden, funktioniert die Lösung mit config.js nicht.
Ich habe es geschafft, dass es so funktioniert:
- Erstellen Sie eine Datei mit dem Namen
preview.jsim Ordner.storybook - Importieren Sie die externe CSS. In meinem Fall handelte es sich um SCSS-Dateien, daher habe ich sie folgendermaßen importiert:
// .storybook/preview.js
import '!style-loader!css-loader!sass-loader!@company/framework/src/styles.sass'
import '!style-loader!css-loader!sass-loader!./cssoverrides.sass'
Der zweite Import wurde hinzugefügt, um einige globale Standardstile zu überschreiben.
Meine Ordnerstruktur:
.storybook
│ cssoverrides.sass
│ main.js
│ preview.js
Verwendete Pakete:
"@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"
gkortsit
am 12. Aug. 2020
Was für mich funktioniert hat, war das Importieren von Bootstrap auf ./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
angelikipatrinou
am 24. Aug. 2020
Verwandte Themen
MrOrz
·
3Kommentare
Jonovono
·
3Kommentare
alexanbj
·
3Kommentare
ZigGreen
·
3Kommentare
wahengchang
·
3Kommentare
Hilfreichster Kommentar
in der Dokumentation zu finden: https://storybook.js.org/configurations/default-config/#css -support