Storybook: ¿Cómo puedo usar estilos de marco CSS dentro de un libro de cuentos?

Creado en 3 abr. 2016 · 35Comentarios · Fuente: storybookjs/storybook

Digamos que mi aplicación se basa en algún marco CSS como Semantic UI, Bootstrap o algo así. ¿Cómo puedo incorporar fácilmente esos estilos dentro de un libro de cuentos para que mis componentes se muestren correctamente?

compatibility with other tools question / support

Fuente

croogie

👍11

Comentario más útil

que se encuentra en la documentación: https://storybook.js.org/configurations/default-config/#css -support

blairanderson en 16 jun. 2017

👍32 ❤10 👎4 🎉3

Todos 35 comentarios

Sí lo es. Lea aquí: https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md

No es eso lo que necesitas, solo vuelve a abrir esto.

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

arunoda en 3 abr. 2016

😕23 👎21

El enlace está roto y no puedo encontrarlo en el archivo en el maestro actual.

andrioid en 19 oct. 2016

👍33

Verifique esto: https://getstorybook.io/docs/configurations/custom-webpack-config

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

arunoda en 19 oct. 2016

👎20 😕15

Gracias. Una forma más sencilla era agregar un archivo head.html en el directorio ".storybook" con el elementos para Bootstrap o Semantic UI

UPD 2017-08-17 (@hypnos)
Ahora es preview_head.html

andrioid en 19 oct. 2016

👍24 👎2

Gracias, el método head.html funciona perfectamente!

wmhafiz en 14 nov. 2016

¿Head.html también sería la mejor manera de hacerlo si el archivo que está agregando no se entrega a través de una URL sino que se aloja localmente? ¿cómo funcionaría eso?

felipecocco en 10 dic. 2016

👍6

Ambos enlaces están rotos.

kirkstrobeck en 17 may. 2017

👍9

Perdón por los enlaces rotos, lamentablemente este es el resultado de nuestra reestructuración. La única forma de encontrarlo es mediante la búsqueda.

¿Qué busca / necesita ayuda con @kirkstrobeck ? Este problema es bastante antiguo y está cerrado.
Si tiene un problema específico con el que podemos ayudarlo, háganoslo saber 👍.

ndelangen en 17 may. 2017

Aterricé aquí tratando de descubrir cómo integrar React Storybook en una aplicación real donde todos nuestros estilos están en archivos scss en app/assets/stylesheets

sergiotapia en 24 may. 2017

👍6

Deberá ampliar nuestra configuración de paquete web / proporcionar su propia configuración de paquete web personalizado.

En él, deberá indicarle al paquete web qué hacer con los archivos .scss . también conocido como sass-loader .

¿Es probable que ya tenga esta configuración para su aplicación, y puede copiar y pegar principalmente desde la configuración del paquete web?

ndelangen en 24 may. 2017

que se encuentra en la documentación: https://storybook.js.org/configurations/default-config/#css -support

blairanderson en 16 jun. 2017

👍32 ❤10 👎4 🎉3

@arunoda ¿ sería posible eliminar los dos enlaces anteriores que tienen la cara confusa que

achenwei-chwy en 16 ago. 2017

Las reacciones confusas probablemente sean suficientes. Yo también los voté a favor.

kirkstrobeck en 16 ago. 2017

Acabo de actualizar los comentarios con enlaces desactualizados

Hypnosphi en 17 ago. 2017

👍2

El archivo de encabezado del libro de cuentos se llama preview-head.html Referencia:
https://storybook.js.org/configurations/add-custom-head-tags/

LukasMac en 24 ago. 2017

👍13 🎉1

Dentro de mi aplicación "principal", mis estilos globales se definen dentro de un archivo JS que exporta una cadena de plantilla que contiene todas las reglas CSS globales.
¿Hay alguna forma de agregar una cadena de plantilla con definiciones CSS al iframe donde se representan las historias?

EDITAR:
Como estoy usando react-styled-components, ahora solo estoy usando su ayudante injectGlobal .

flavordaaave en 14 nov. 2017

@flavordaaave Creo que querrás usar solo inyectar los estilos en una etiqueta de estilo de config.js

ndelangen en 14 nov. 2017

@ndelangen Hasta ahora, todas las posibilidades de inyectar estilo global ( import './styles.css'; o vía preview-head.html ) no me permiten inyectar estilos con parámetros dinámicos.

Mis estilos se ven así:

/* .storybook/config.js */

import theme from './theme'

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

Entonces, por ahora, estoy usando el injectGlobal helper de react-styled-components como se menciona en mi EDITAR arriba.

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

injectGlobal`${styles}`
...

flavordaaave en 14 nov. 2017

👍10

puedes lograr un resultado similar con esto:

// 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)

Hypnosphi en 15 nov. 2017

👍5

¡Hola!
Estoy tratando de vincular mi hoja de estilo con Storybook y me estoy tachando.

Seguí estas instrucciones para importar mi archivo CSS (que vive en static/style.css en la raíz de mi proyecto) con esta línea: import '../static/style.css'; . Eso resultó en un error con r

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

No quiero tener que pasar por todo este rigamarole para reconciliar cada recurso referenciado externamente en mi hoja de estilo, así que pensé en intentarlo de otra manera.

Agregué preview-head.html por estos documentos , vinculando mi hoja de estilo así:

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

Sin embargo, esto da como resultado un error 404 para el recurso. Creo que podría ser solo un problema de ruta, pero parece que no puedo encontrar qué ruta debería usar en relación con el lugar donde se ejecuta Storybook. ¿Algunas ideas?

bradfrost en 28 mar. 2018

Si obtiene 404 porque su CSS no está en un CDN, puede pasar un parámetro adicional para ejecutar Storybook con una carpeta estática y hacer referencia a sus archivos como solo ./some.css . Ejecute storybook -p 9001 -s ./a-static-folder y coloque su css en esa carpeta.

nickytonline en 29 mar. 2018

👍4

Gracias por la sugerencia, @nickytonline. Desafortunadamente, eso no pareció funcionar. Tengo mis archivos en static/style.css y ejecuté el comando storybook -p 9001 -s ./static . Eso resultó en storybook: command not found . Ejecuté npm run storybook -p 9001 -s ./static que se ejecutó, pero aún así resultó en un error 404 en mi hoja de estilo.

bradfrost en 29 mar. 2018

@bradfrost , solo para aclarar, cuando ejecuta npm run storybook -p 9001 -s ./static , ./static actúa como / en el libro de cuentos, por lo que si su archivo está en static/styles.css en su proyecto, su enlace sería <link rel="stylesheet" href="./styles.css" /> no <link rel="stylesheet" href="./static/styles.css" />

nickytonline en 29 mar. 2018

👍8

@nickytonline Sí, tenía cosas vinculadas como <link rel="stylesheet" href="./styles.css" /> .

bradfrost en 29 mar. 2018

@bradfrost esto me estaba molestando porque no estaba funcionando para usted, así que creo un repositorio muy básico usando create-react-app y la CLI de storybook. Muestra un ejemplo de un activo estático que se usa en un libro de cuentos al que se hace referencia a través de una etiqueta <link /> . Está disponible aquí, https://github.com/nickytonline/for-brad

Puede ver la hoja de estilo a la que se hace referencia aquí, https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1

nickytonline en 3 abr. 2018

👍7 ❤2

@nickytonline ¡ Muchas gracias por el proyecto de demostración! Realmente lo aprecio.

El problema con el que todavía me encuentro se refleja en mi publicación original , que es el uso de import para incluir los estilos en el proyecto. Desafortunadamente, ese método arroja errores si no se resuelven activos como fuentes, íconos o imágenes de fondo. Me doy cuenta de que hay formas de remediar eso, pero supongo que solo estoy buscando vincular una hoja de estilo en el encabezado de mi documento a la antigua usanza.

bradfrost en 8 abr. 2018

Lo siento, mi mal por no absorber todo el contenido de tu publicación original . Eso es bastante complicado si quieres evitar el rigamarole . Tendré que pensar un poco en eso.

nickytonline en 8 abr. 2018

Lo que puede hacer es crear una carpeta "pública" en la carpeta raíz.
en la carpeta 'public / semantic' inserte el contenido de 'node_modules / semantic-ui-css'.
en package.json => scripts => storybook => agregar '' -s ./public "
¡¡¡última cosa!!! en el archivo .less de su componente, haga @import '/semantic/semantic.min.css';
ahora el icono debería funcionar sin problemas.

amos80m en 8 ene. 2019

😕1

Para Storybook v5 y normalize.css "framework", basta con agregar import "normalize.css"; dentro del archivo .storybook/config.js .

jmarceli en 6 may. 2019

👍11 🎉3

@jmarceli Me funciona, ¡muchas gracias!

anton-paskanny en 17 may. 2019

¿Sigue siendo una opción viable con la v6?

Para Storybook v5 y normalize.css "framework", basta con agregar import "normalize.css"; dentro del archivo .storybook/config.js .

snyderhaus en 30 mar. 2020

@snyderhaus sí, aunque desde 5.3 config.js ha quedado en desuso y recomendamos encarecidamente usar preview.js lugar. más información:

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

shilman en 31 mar. 2020

¡He venido a este hilo muchas veces para numerosos proyectos! Así que esto es para mi propia referencia y para cualquier otra persona.

Esto funcionó para mí.

// 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 anula el tema de arranque predeterminado usando variables sass

Pude usar la configuración predeterminada del paquete web de los libros de cuentos y simplemente hacer referencia a las hojas de estilo, además de usar la sintaxis del cargador en línea para mis archivos sass , como se muestra en los documentos .

"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 en 5 abr. 2020

👍11

Para cualquiera que use v6 +, la solución que use config.js no funcionará.

Me las arreglé para que funcione así:

cree un archivo llamado preview.js en la carpeta .storybook
importar el css externo. En mi caso, eran archivos scss, así que los importé así:

// .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 segunda importación se agregó para anular algunos estilos globales predeterminados.

Mi estructura de carpetas:

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

Paquetes utilizados:

"@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 en 12 ago. 2020

👍4

Lo que funcionó para mí fue importar bootstrap en ./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