Storybook: Bagaimana saya bisa menggunakan gaya kerangka CSS di dalam buku cerita
Katakanlah aplikasi saya mendasarkan pada beberapa kerangka CSS seperti Semantic UI, Bootstrap atau semacamnya. Bagaimana saya bisa dengan mudah memasukkan gaya itu ke dalam buku cerita sehingga komponen saya akan ditampilkan dengan benar?
croogie
Semua 35 komentar
Ya itu. Baca di sini - https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md
Saya bukan itu yang Anda butuhkan, buka kembali ini.
UPD 2017-08-17 ()
https://storybook.js.org/configurations/add-custom-head-tags/
arunoda
pada 3 Apr 2016
Tautan rusak dan saya tidak dapat menemukannya di file di master saat ini.
andrioid
pada 19 Okt 2016
Periksa ini: https://getstorybook.io/docs/configurations/custom-webpack-config
UPD 2017-08-17 ()
https://storybook.js.org/configurations/custom-webpack-config/
arunoda
pada 19 Okt 2016
Terima kasih. Cara yang lebih mudah adalah dengan menambahkan file head.html di direktori ".storybook" dengan elemen untuk Bootstrap atau Semantic UI
UPD 2017-08-17 ()
Sekarang preview_head.html
andrioid
pada 19 Okt 2016
Thanks head.html metode bekerja dengan sempurna!
wmhafiz
pada 14 Nov 2016
Apakah head.html juga akan menjadi cara terbaik untuk melakukannya jika file yang Anda tambahkan tidak disajikan melalui URL tetapi dihosting secara lokal? bagaimana cara kerjanya?
felipecocco
pada 10 Des 2016
Kedua tautan rusak.
kirkstrobeck
pada 17 Mei 2017
Maaf untuk tautan yang rusak, sayangnya ini adalah hasil dari restrukturisasi kami, Satu-satunya cara untuk menemukannya adalah dengan penelusuran.
Apa yang Anda cari / butuh bantuan dengan @kirkstrobeck ? Masalah ini sudah cukup lama dan sudah ditutup.
Jika Anda memiliki masalah khusus yang dapat kami bantu, beri tahu kami 👍.
ndelangen
pada 17 Mei 2017
Saya mendarat di sini mencoba mencari cara untuk mengintegrasikan React Storybook ke dalam aplikasi nyata di mana semua gaya kita ada dalam file scss di app/assets/stylesheets
sergiotapia
pada 24 Mei 2017
Anda harus memperluas konfigurasi webpack kami / menyediakan konfigurasi webpack kustom Anda sendiri.
Di dalamnya Anda harus memberi tahu webpack apa yang harus dilakukan dengan .scss -files. alias, Anda perlu menambahkan sass-loader .
Mungkin Anda sudah menyiapkan ini untuk aplikasi Anda, dan Anda sebagian besar dapat menyalin-tempel dari konfigurasi webpack?
ndelangen
pada 24 Mei 2017
ditemukan dalam dokumentasi: https://storybook.js.org/configurations/default-config/#css -support
blairanderson
pada 16 Jun 2017
@arunoda apakah mungkin menghapus di atas dua tautan yang memiliki wajah bingung yang saya tandai di atas? menghemat waktu untuk orang lain yang masuk ke halaman ini di masa mendatang. Terima kasih!
achenwei-chwy
pada 16 Agu 2017
Reaksi bingung mungkin sudah cukup. Saya juga memberi suara positif pada mereka.
kirkstrobeck
pada 16 Agu 2017
Baru saja memperbarui komentar dengan tautan usang
Hypnosphi
pada 17 Agu 2017
File header untuk buku cerita disebut preview-head.html Referensi:
https://storybook.js.org/configurations/add-custom-head-tags/
LukasMac
pada 24 Agu 2017
Dalam aplikasi "utama" saya, gaya global saya ditentukan dalam file JS yang mengekspor string template yang berisi semua aturan CSS global.
Apakah ada cara untuk menambahkan string template dengan definisi CSS ke iframe tempat cerita dirender?
EDIT:
Karena saya menggunakan react-styled-components, saya sekarang hanya menggunakan injectGlobal helper.
flavordaaave
pada 14 Nov 2017
@flavordaaave Saya rasa Anda akan ingin menggunakan cukup menyuntikkan gaya dalam tag gaya dari config.js
ndelangen
pada 14 Nov 2017
@ndelangen Sejauh ini semua kemungkinan memasukkan gaya global ( import './styles.css'; atau melalui preview-head.html ) tidak mengizinkan saya untuk memasukkan gaya dengan parameter dinamis.
Gaya saya terlihat seperti ini:
/* .storybook/config.js */
import theme from './theme'
export default `
html {
font-family: Helvetica;
background: ${theme.canvas_ground};
...
}
`
Jadi untuk saat ini saya menggunakan injectGlobal helper dari react-styled-components seperti yang disebutkan dalam EDIT saya di atas.
/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'
injectGlobal`${styles}`
...
Anda dapat mencapai hasil yang serupa dengan ini:
// 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)
Halo yang disana!
Saya mencoba untuk menghubungkan stylesheet saya ke Storybook, dan saya tampil mencolok.
Saya mengikuti petunjuk ini untuk mengimpor file CSS saya (yang ada di static/style.css di root proyek saya) dengan baris ini: import '../static/style.css'; . Itu mengakibatkan kesalahan dengan r
Error: Can't resolve '../i/link.svg' in [path]
Saya tidak ingin harus melalui semua rigamarole ini untuk mendamaikan setiap sumber referensi eksternal di stylesheet saya, jadi saya pikir saya akan mencoba cara yang berbeda.
Saya menambahkan preview-head.html per dokumen ini , menautkan lembar gaya saya seperti ini:
<link rel="stylesheet" href="./static/style.css" />
Namun, ini menghasilkan kesalahan 404 untuk sumber daya. Saya pikir ini mungkin hanya masalah jalur, tetapi tidak dapat menemukan jalur mana yang harus saya gunakan terkait dengan tempat Buku Cerita berjalan. Ada ide?
bradfrost
pada 28 Mar 2018
Jika Anda mendapatkan 404 karena CSS Anda tidak ada di CDN, Anda dapat memberikan parameter tambahan untuk menjalankan Storybook dengan folder statis dan mereferensikan file Anda hanya sebagai ./some.css . Jalankan storybook -p 9001 -s ./a-static-folder dan taruh css Anda di folder itu.
nickytonline
pada 29 Mar 2018
Terima kasih atas sarannya, @nickytonline. Sayangnya itu sepertinya tidak berhasil. Saya memiliki file saya di static/style.css dan saya menjalankan perintah storybook -p 9001 -s ./static . Hasilnya storybook: command not found . Saya menjalankan npm run storybook -p 9001 -s ./static yang berjalan, tetapi masih menghasilkan kesalahan 404 pada stylesheet saya.
bradfrost
pada 29 Mar 2018
@bradfrost , hanya untuk klarifikasi, ketika Anda menjalankan npm run storybook -p 9001 -s ./static , ./static bertindak seperti / di buku cerita, jadi jika file Anda di static/styles.css dalam proyek Anda, link Anda akan menjadi <link rel="stylesheet" href="./styles.css" /> bukan <link rel="stylesheet" href="./static/styles.css" />
nickytonline
pada 29 Mar 2018
@nickytonline Ya, saya memiliki hal-hal yang ditautkan sebagai <link rel="stylesheet" href="./styles.css" /> .
bradfrost
pada 29 Mar 2018
@bradfrost ini mengganggu saya karena itu tidak berfungsi untuk Anda, jadi saya membuat repo yang sangat mendasar menggunakan create-react-app dan CLI buku cerita. Ini menunjukkan contoh aset statis yang digunakan dalam buku cerita yang direferensikan melalui tag <link /> . Ini tersedia di sini, https://github.com/nickytonline/for-brad
Anda dapat melihat stylesheet direferensikan di sini, https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1
nickytonline
pada 3 Apr 2018
@nickytonline Terima kasih banyak atas proyek demo! Saya sangat menghargai itu.
Masalah yang masih saya hadapi tercermin dalam posting asli saya , yaitu penggunaan import untuk memasukkan gaya ke dalam proyek. Metode itu sayangnya menimbulkan kesalahan jika aset seperti font atau ikon atau gambar latar belakang tidak terselesaikan. Saya menyadari ada cara untuk memperbaikinya, tapi saya rasa saya hanya ingin menghubungkan sebuah stylesheet di bagian kepala dokumen saya dengan cara lama.
bradfrost
pada 8 Apr 2018
Maaf, saya buruk karena tidak menyerap seluruh konten posting asli Anda. Itu cukup acar jika Anda ingin menghindari rigamarole . Aku harus memikirkan yang itu sedikit.
nickytonline
pada 8 Apr 2018
Yang dapat Anda lakukan adalah membuat folder 'publik' di folder root.
di folder 'publik / semantik' hentikan konten 'node_modules / semantic-ui-css'.
di package.json => scripts => storybook => tambahkan '' -s ./public "
hal terakhir!!! dalam komponen berkas .less Anda lakukan @ impor '/semantic/semantic.min.css';
Sekarang Ikon harus bekerja dengan lancar.
amos80m
pada 8 Jan 2019
Untuk Storybook v5 dan normalize.css "framework", cukup menambahkan import "normalize.css"; di dalam file .storybook/config.js .
jmarceli
pada 6 Mei 2019
@jmarceli Berhasil untuk saya, terima kasih banyak!
anton-paskanny
pada 17 Mei 2019
Apakah ini masih opsi yang layak dengan v6?
Untuk Storybook v5 dan
normalize.css"framework", cukup menambahkanimport "normalize.css";di dalam file.storybook/config.js.
snyderhaus
pada 30 Mar 2020
@snyderhaus ya, meskipun sejak 5,3 config.js sudah tidak digunakan lagi dan kami sangat menyarankan untuk menggunakan preview.js sebagai gantinya. Info lebih lanjut:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs-configuration
shilman
pada 31 Mar 2020
Saya telah datang ke utas ini berkali-kali untuk banyak proyek! Jadi ini untuk referensi saya sendiri dan juga orang lain.
Ini berhasil untuk saya.
// 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';
style.scss menimpa tema bootstrap default menggunakan variabel sass
Saya dapat menggunakan konfigurasi default webpack buku cerita dan hanya mereferensikan lembar gaya seperti itu, selain itu menggunakan sintaks pemuat inline untuk file sass , seperti yang ditunjukkan dalam dokumen .
"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
pada 5 Apr 2020
Bagi siapa pun yang menggunakan v6 + solusi yang menggunakan config.js tidak akan berfungsi.
Saya telah berhasil membuatnya bekerja seperti ini:
- buat file bernama
preview.jsdi folder.storybook - impor css eksternal. Dalam kasus saya, itu adalah file scss jadi saya telah mengimpornya seperti ini:
// .storybook/preview.js
import '!style-loader!css-loader!sass-loader!@company/framework/src/styles.sass'
import '!style-loader!css-loader!sass-loader!./cssoverrides.sass'
Impor kedua ditambahkan untuk mengganti beberapa gaya global default.
Struktur folder saya:
.storybook
│ cssoverrides.sass
│ main.js
│ preview.js
Paket yang digunakan:
"@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
pada 12 Agu 2020
Apa yang berhasil bagi saya adalah mengimpor bootstrap di ./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
pada 24 Agu 2020
Masalah terkait
tlrobinson
·
3Komentar
arunoda
·
3Komentar
ZigGreen
·
3Komentar
MrOrz
·
3Komentar
levithomason
·
3Komentar
Komentar yang paling membantu
ditemukan dalam dokumentasi: https://storybook.js.org/configurations/default-config/#css -support