Storybook: ¿Cómo puedo incluir estilos globales (scss) una vez para todos los iframes de Storybook?

Intente agregar su archivo global.scss en angular.json

Verifique su defaultProject (hay una propiedad defaultProject dentro del json) y agréguelo a la lista de estilos

"styles": [
              "projects/your-cli-project/src/lib/styles/your-styles.scss"
            ],

Lo hago de esa manera y funciona bien. esa es una opción para ti?

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

Hola @omaracrystal , así es como lo hice:
en los archivos .storybook/config.js , agregue la importación con los cargadores correctos en línea:

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

Luego agregue / importe todos los estilos que necesita en el archivo scss-loader.scss :

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="13">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="14">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

La solución propuesta por @kroeder funciona siempre que use componentes de una aplicación Angular, pero para las bibliotecas, no puede agregar la propiedad styles en el archivo angular.json

Intente agregar su archivo global.scss en angular.json

Verifique su defaultProject (hay una propiedad defaultProject dentro del json) y agréguelo a la lista de estilos

"styles": [
              "projects/your-cli-project/src/lib/styles/your-styles.scss"
            ],

Lo hago de esa manera y funciona bien. esa es una opción para ti?

Hice exactamente esto, pero no parece cargarme cuando ejecuto el libro de cuentos

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

Hola, soy yo otra vez! Voy a cerrar este problema para ayudar a nuestros mantenedores a centrarse en la hoja de ruta de desarrollo actual. Si el problema mencionado sigue siendo motivo de preocupación, abra un nuevo ticket y mencione el anterior. ¡Saludos y gracias por usar Storybook!

Hola @omaracrystal , así es como lo hice:
en los archivos .storybook/config.js , agregue la importación con los cargadores correctos en línea:

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

Luego agregue / importe todos los estilos que necesita en el archivo scss-loader.scss :

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="14">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="15">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

La solución propuesta por @kroeder funciona siempre que use componentes de una aplicación Angular, pero para las bibliotecas, no puede agregar la propiedad styles en el archivo angular.json

¿Eso funciona para todos? No trabajando de mi lado :(

@ozanmanav , ¿intentaste importarlo en .storybook/config.js ?

PD: porque para mí funciona, pero solo importo .css archivo sin cargadores de paquetes web

Parece que esto ya no funciona con la estructura de archivo main.js de Storybook v5.3

@garrettmaring, ¿ .storybook/preview.js lugar de .storybook/config.js ?

@garrettmaring
Finalmente lo hice funcionar para archivos .css usando import '!style-loader!css-loader!./main.css' .
Al principio intenté jugar con la configuración del paquete web, pero eliminé todas mis reglas personalizadas y las incluí como arriba. Obviamente npm instala los cargadores.

@shilman sí, eso fue suficiente 👍 Bastante claro una vez que vi algo de documentación al respecto. Puede haber espacio para documentos más claros en la documentación principal de Storybook. Encontré este artículo claro.

@garrettmaring ¿Te importaría enviar un PR para ayudar a mejorar los documentos?

@garrettmaring
Finalmente lo hice funcionar para archivos .css usando import '!style-loader!css-loader!./main.css' .
Al principio intenté jugar con la configuración del paquete web, pero eliminé todas mis reglas personalizadas y las incluí como arriba. Obviamente npm instala los cargadores.

Solo un poco para su información que acabo de descubrir, este enfoque funciona de maravilla cuando se sirve el libro de cuentos localmente, pero no funciona (por lo que vi) con build-storybook.

Mi solución
Agregue <link rel="stylesheet" href="./your-global-styles.css" /> al preview-head.html. Luego use la marca -s en el directorio de your-global-styles.css y copie los estilos en el directorio de compilación del libro de cuentos. Ahora el iframe.html "debería" hacer referencia a your-global-styles.css del mismo directorio.

El único problema con esto es que cuando se ejecuta localmente, la consola del navegador dirá que no puede encontrar localhost/your-global-styles.css pero aún funciona según lo previsto.

Si alguien tiene una mejor manera de abordar esto, o conoce una solución adecuada, hágamelo saber :)

servimos archivos scss en el libro de cuentos usando lo siguiente:

import '! style-loader! css-loader! sass-loader! ./ main.scss';

Esto funciona bien para nosotros

@blemaire ¿Dónde estás usando esa línea?

@blemaire ¿Dónde estás usando esa línea?

@lopis simplemente crea preview.js en la carpeta .storybook y coloca esa línea en ella

Gracias a todos. Confirmando que

• agregando el archivo scss a .storybook (o cualquier lugar donde desee colocarlo).
• Creando .storybook/preview.js
• agregando import '!style-loader!css-loader!sass-loader!./styles.scss'; al directorio preview.js
• agregando "css-loader" como devDependency a package.json

trabaja para nosotros; storybook icw una biblioteca Angular 9 (por lo que no hay opción para agregarla al archivo angular.json )

En la configuración basada en nextjs, la línea simple de import "../styles/main.css"; (como en la aplicación principal) a .storybook/preview.js agrega estilos correctamente.

Las soluciones anteriores funcionan si todas sus rutas son relativas ../../src/main.scss pero mi proyecto actual usa SCSS global / alias.

Mi configuración de paquete web main.js para Storybook puede compilar el alias. Pero cuando intento importar SCSS global / alias en mi preview.js entonces no puedo resolver las rutas.

No estoy seguro de adónde ir.

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

Intenté esto, pero obteniendo un error. Necesito Storybook para conocer mis variables y mixins globales de CSS.

ERR! import '!style-loader!css-loader!sass-loader!./scss-loader.scss';
ERR!        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ERR! 
ERR! SyntaxError: Unexpected string

En la configuración basada en nextjs, la línea simple de import "../styles/main.css"; (como en la aplicación principal) a .storybook/preview.js agrega estilos correctamente.

¿Este styles / main.css contiene sus variables SCSS globales? ¿Se aplican en Storybook? Intenté esto, pero aún obtengo SassError: Undefined variable: $my-variable-here

Hola @omaracrystal , así es como lo hice:
en los archivos .storybook/config.js , agregue la importación con los cargadores correctos en línea:

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

Luego agregue / importe todos los estilos que necesita en el archivo scss-loader.scss :

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="15">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="16">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

La solución propuesta por @kroeder funciona siempre que use componentes de una aplicación Angular, pero para las bibliotecas, no puede agregar la propiedad styles en el archivo angular.json

¿Eso funciona para todos? No trabajando de mi lado :(

No Tampoco me ayuda. Recibo este error ahora:

ERR! import '!style-loader!css-loader!sass-loader!./scss-loader.scss';
ERR!        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ERR! 
ERR! SyntaxError: Unexpected string

Describe el error
He estado probando varias formas de incorporar estilos globales (scss) una vez para todos los Iframes de Storybook y no he tenido éxito. No parece haber una forma clara y concisa de hacer esto.

Reproducir
Intentos:

1. 
   
   • Importe los estilos globales dentro de cada componente.
   
   
   • Resultados: se aplican estilos, pero se repiten varios estilos global.scss {historia #} x veces.
   
   
2. 
   
   • Se siguieron las instrucciones aquí para la configuración del paquete web personalizado: https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • Resultados: parece que esto solo le dice a Storybook que lea el scss, en realidad no configura un archivo global que se aplica a todas las historias
   
   
3. 
   
   • Un lugar recomienda crear un decorador para Storybook y aplicar el CSS "global" de esa manera.
   
   
   • Resultado: no funcionaría para lo que estoy tratando de hacer (múltiples estilos, mixins, variables, etc.) Esto solo funciona para pequeños cambios de CSS
   
   
4. 
   
   • En la configuración bajo .storybook require ('../ libs / storybook / global-styles.scss'); dentro de la función loadStories
   
   
   • Resultado: nada
   
   
5. 
   
   • Intenté importar los estilos globales dentro de Storybook index.ts
   
   
   • Resultado: nada
   
   

6. • Intenté agregar los estilos globales a través del archivo angular.json

     • Resultado: nada

Comportamiento esperado
Esperaría poder importar archivos globales (scss) en un solo lugar para que se puedan aplicar a cada iframe de Story. ¿Podría haber una configuración de configuración que no conozco?

Sistema:

• SO: MacOS
• Dispositivo: Macbook Pro 2015
• Navegador: Chrome
• Marco: Angular
• Complementos: - [addon-centrado, addon-viewport, addon-info]
• Versión: [^ 5.0.1]

Contexto adicional
Espero que me falte alguna configuración dentro del libro de cuentos que simplificaría la resolución.

Alguna vez resolviste esto? Si es así, ¿cuál fue la solución? ¡Gracias!

@caseytrombley La solución es agregar import '!style-loader!css-loader!sass-loader!./styles.scss'; a su preview.js.

Para Create React App + Storybook, agregué lo siguiente a config.js para que mi CSS Reset se aplicara a Storybook.

import '!style-loader!css-loader!../src/reset.css';

¿Alguien tiene una solución que funcione para postcss-scss?

Puede leer el blog que escribí que habla exactamente sobre la implementación de constantes SCSS para su libro de cuentos a través de la configuración personalizada del paquete web.

Hay un defecto que he registrado explicando el error de configuración actual https://github.com/storybookjs/storybook/issues/11052 y el blog que escribí como una solución.

¡Espero que esto ayude!

Para instalaciones que tienen main.js (es decir, ejecutó npx -p @storybook/cli sb init en un proyecto CreateReactApp), simplemente agregue preview.js como hermano y luego haga esto:

// .storybook/preview.js
require('!style-loader!css-loader!../src/css/tailwind-utility-classes.css')

Si se queja de que uno de esos cargadores no está instalado (debería estarlo si es un proyecto de CRA), simplemente instálelos manualmente (es decir, yarn add style-loader css-loader ).

¿Bloquear el hilo para que la gente pueda simplemente saltar al fondo en busca de una solución cuando la solución votada a favor / en desuso falla?

@garrettmaring, ¿ .storybook/preview.js lugar de .storybook/config.js ?

Cuando creo un archivo styles.css dentro del mismo directorio y lo importo con import './styles.css'; dentro de mi archivo preview.js , mi libro de cuentos de repente se atasca en un estado de carga ... :(

¿Alguna idea de cómo resolver eso?

Utilizo storybook con la configuración open-wc para componentes web y tengo un preview.js y main.js dentro de mi carpeta .storybook .

@dcts que podría deberse a que su ./styles.css hace referencia a las utilidades de Tailwind, usa algunas características que necesitan ser procesadas previamente, o de alguna otra manera "rotas" como un archivo independiente.

Necesitaba hacer tres cosas:

1. Cree un archivo css de entrada. Para mí, esto es css/tailwind.css donde importo todo lo necesario para mi configuración de Tailwind.
2. Cuando ejecute el libro de cuentos, primero cree ese archivo. Para mí, este fue un comando PostCSS postcss css/tailwind.css -o css/index.css
3. En .storybook/preview.js (cree ese archivo si es necesario) agregue import '../css/index.css

Estoy usando Twin y puedo usar este componente como se esperaba:

import tw, { styled } from 'twin.macro'

const StyledReactionButton = styled.button`
  ${tw`bg-blue-400 bg-opacity-25`}
`

Creo que una mejor solución sería editar la configuración del paquete web del libro de cuentos para manejar el paso postcss.

Estoy usando Vue.js con scss. Mi problema es que al importar scss global en preview.js, mis devtolls de Chrome son muy lentos y no se pueden utilizar. ¿Alguien tiene el mismo problema? ¿Alguna alternativa? Estoy tratando de no importar scss globales en cada una de mis historias.

Las soluciones anteriores funcionaron de alguna manera, pero este método __de los documentos oficiales__ elimina el problema en todo el proyecto.

En resumen, necesitamos extender la configuración de Webpack para configurar los cargadores scss.

Código de muestra de documentos oficiales

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

Uso

Ahora puede importar archivos scss como siempre en .storybook/preview.js :

// .storybook/preview.js

import "../src/styles/main.scss";

// ...

... e incluso en sus componentes también:

<!-- src/components/MyComponent.vue -->

<template>
  ...
</template>

<script>
// ...
</script>

<style lang="scss">
<strong i="18">@import</strong> "../styles/components/components.my-component";
</style>

Me encontré con un problema en el que la importación de un proyecto SCSS considerable desde preview.js está provocando tiempos de recompilación de más de 5 segundos en cualquier cambio en cualquier parte del proyecto. Mover esto a una historia de alguna manera hace que todo vuelva a tener tiempos de recompilación <1 s.

Estoy usando Storybook con Gatsby y los ajustes preestablecidos de scss estándar . Después de importar el archivo global.scss a preview.js se recogen los estilos, pero si defino variables en global.scss y las uso en un componente, se activa el siguiente error:

ERROR in ./src/stories/button.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/stories/button.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$black".

Sospecho que el archivo global.scss se carga demasiado tarde, pero no sé cómo configurarlo correctamente. Tal vez incluso sea un error, porque agregar estilos globales a preview.js es el método recomendado.

Actualizar

No es la orden. Si escribo lo siguiente en global.scss.

body {
    background-color: black;
}

y lo siguiente en Button.scss:

body {
  background-color:green;
}

El color de fondo es de hecho verde. Esto significa que Buttons.scss se carga después de Global.scss como debería, pero las variables aún no se recogen.

Solución
Sí, aprendí mucho hoy. El principal problema fue que las variables sass solo se definen en el archivo en el que se declaran de forma predeterminada. Si desea usar variables en archivos, debe usar sass-modules. La forma anterior era usar @import , pero la nueva forma preferida es @use. Empiezo cada módulo como button.scss con @use pathtomodule/global.scss . En mi caso, esto hace que la importación en preview.js redundante.

Hubo otra trampa. @use actualmente solo es compatible con dart sass. Tenía instalado node-sass ( npm i node-sass --save-dev ). Hay un paquete llamado dart-sass ( npm i dart-sass --save-dev ), pero ese no es el correcto para los ajustes preestablecidos antes mencionados. El descaro de dardo se ha convertido en un descaro regular . Simplemente puede instalarlo con npm i sass --save-dev .

Hola @Piepongwong ,

No estoy usando Gatsby, pero en Vue resolví ese problema al poner todas las importaciones de mixin y variables en un archivo llamado _common.scss e importarlo en componentes como este:

<style lang="scss">
<strong i="9">@import</strong> 'path/to/styles/_common.scss';
<strong i="10">@import</strong> 'path/to/styles/components/_components.component.scss';
</style>

De esta manera, siempre estoy seguro de que mis mixins y variables existen, pero tenga en cuenta que debe abstraer todos sus componentes y variables correctamente. Puede consultar inuitcss para conocer las mejores prácticas.

Espero que esto ayude.

Hola @omaracrystal , así es como lo hice:
en los archivos .storybook/config.js , agregue la importación con los cargadores correctos en línea:

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

Luego agregue / importe todos los estilos que necesita en el archivo scss-loader.scss :

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="15">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="16">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

La solución propuesta por @kroeder funciona siempre que use componentes de una aplicación Angular, pero para las bibliotecas, no puede agregar la propiedad styles en el archivo angular.json

¿Eso funciona para todos? No trabajando de mi lado :(

no para mí :( intenté con next.js y reactstrap pero no cargó el app.scss de mi carpeta de estilo: /

Hola @omaracrystal , así es como lo hice:
en los archivos .storybook/config.js , agregue la importación con los cargadores correctos en línea:

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

Luego agregue / importe todos los estilos que necesita en el archivo scss-loader.scss :

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="16">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="17">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

La solución propuesta por @kroeder funciona siempre que use componentes de una aplicación Angular, pero para las bibliotecas, no puede agregar la propiedad styles en el archivo angular.json

¿Eso funciona para todos? No trabajando de mi lado :(

no para mí :( intenté con next.js y reactstrap pero no cargó el app.scss de mi carpeta de estilo: /

Prueba con @hayatbiralem , debería funcionar.

Esto funcionó para mí en la última versión del libro de cuentos @storybook/[email protected] Espero que esto ayude a alguien!

// .storybook/main.js
const path = require('path');

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../app/frontend/components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@storybook/preset-scss'
  ],
  webpackFinal: async (config) => {
    // this sets the default path for modules
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../app/frontend"),
    ];

    config.module.rules.map(rule => {
      if (rule.test instanceof RegExp && rule.test.toString() === '/\\.s[ca]ss$/') {
        rule.use.push({
          loader: require.resolve('sass-resources-loader'),
          options: {
            resources: [
              path.resolve(__dirname, '../app/frontend/styles/base/_variables.scss')
            ]
          }
        })
      }
      return rule
    })
    return config;
  },
}