Storybook: Comment puis-je inclure les styles globaux (scss) une fois pour toutes les iframes Storybook?

Essayez d'ajouter votre fichier global.scss dans angular.json

Vérifiez votre defaultProject (il y a une propriété defaultProject dans le json) et ajoutez-la à la liste des styles

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

Je le fais de cette façon et cela fonctionne très bien. C'est une option pour toi?

Salut à tous! On dirait qu'il n'y a pas eu grand-chose dans ce numéro ces derniers temps. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas à poursuivre la discussion. Malheureusement, nous n'avons pas le temps d'aborder tous les problèmes. Nous sommes toujours ouverts aux contributions, veuillez donc nous envoyer une demande de tirage si vous souhaitez aider. Les problèmes inactifs seront résolus après 30 jours. Merci!

Salut @omaracrystal, voici comment je l'ai fait:
dans les fichiers .storybook/config.js , ajoutez l'importation avec les bons chargeurs incorporés:

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

Ensuite, ajoutez / importez tous les styles dont vous avez besoin dans le fichier 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 solution proposée par @kroeder fonctionne tant que vous utilisez des composants d'une application Angular mais pour les bibliothèques, vous ne pouvez pas ajouter la propriété styles dans le fichier angular.json

Essayez d'ajouter votre fichier global.scss dans angular.json

Vérifiez votre defaultProject (il y a une propriété defaultProject dans le json) et ajoutez-la à la liste des styles

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

Je le fais de cette façon et cela fonctionne très bien. C'est une option pour toi?

J'ai fait exactement cette chose, mais cela ne semble pas me charger quand je lance un livre d'histoires

Salut à tous! On dirait qu'il n'y a pas eu grand-chose dans ce numéro ces derniers temps. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas à poursuivre la discussion. Malheureusement, nous n'avons pas le temps d'aborder tous les problèmes. Nous sommes toujours ouverts aux contributions, veuillez donc nous envoyer une demande de tirage si vous souhaitez aider. Les problèmes inactifs seront résolus après 30 jours. Merci!

Hé là, c'est encore moi! Je vais fermer ce numéro pour aider nos responsables à se concentrer sur la feuille de route de développement actuelle. Si le problème mentionné est toujours un problème, veuillez ouvrir un nouveau ticket et mentionner l'ancien. Bravo et merci d'utiliser Storybook!

Salut @omaracrystal, voici comment je l'ai fait:
dans les fichiers .storybook/config.js , ajoutez l'importation avec les bons chargeurs incorporés:

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

Ensuite, ajoutez / importez tous les styles dont vous avez besoin dans le fichier 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 solution proposée par @kroeder fonctionne tant que vous utilisez des composants d'une application Angular mais pour les bibliothèques, vous ne pouvez pas ajouter la propriété styles dans le fichier angular.json

Cela fonctionne-t-il pour tout le monde? Ne travaille pas de mon côté :(

@ozanmanav avez-vous essayé de l'importer dans .storybook/config.js ?

PS: parce que pour moi ça marche mais j'importe juste .css fichier

Cela ne semble plus fonctionner avec la structure de fichier main.js de Storybook v5.3

@garrettmaring avez-vous essayé avec .storybook/preview.js plutôt que .storybook/config.js ?

@garrettmaring
Je l'ai finalement fait fonctionner pour des fichiers .css en utilisant import '!style-loader!css-loader!./main.css' .
Au début, j'ai essayé de jouer avec la configuration du pack Web, mais j'ai supprimé toutes mes règles personnalisées et je l'ai insérée comme ci-dessus. Évidemment, npm installe les chargeurs.

@shilman oui, ça l'a fait 👍 Assez clair une fois que j'ai vu de la documentation à ce sujet. Il peut y avoir de la place pour des documents plus clairs dans la documentation principale de Storybook. J'ai trouvé cet article clair.

@garrettmaring Envie de soumettre un PR pour aider à améliorer les documents?

@garrettmaring
Je l'ai finalement fait fonctionner pour des fichiers .css en utilisant import '!style-loader!css-loader!./main.css' .
Au début, j'ai essayé de jouer avec la configuration du pack Web, mais j'ai supprimé toutes mes règles personnalisées et je l'ai insérée comme ci-dessus. Évidemment, npm installe les chargeurs.

Juste quelques informations que je viens de comprendre, cette approche fonctionne à merveille lorsque vous diffusez un livre de contes localement, mais cela ne fonctionne pas (d'après ce que j'ai vu) avec build-storybook.

Ma solution
Ajoutez <link rel="stylesheet" href="./your-global-styles.css" /> au fichier preview-head.html. Utilisez ensuite l'option -s sur le répertoire de your-global-styles.css , copiez les styles dans le répertoire de construction du livre de contes. Maintenant, iframe.html "devrait" faire référence à your-global-styles.css du même répertoire.

Le seul problème avec ceci est lors de l'exécution locale, la console du navigateur dira qu'elle ne peut pas trouver localhost/your-global-styles.css mais cela fonctionne toujours comme prévu.

Si quelqu'un a une meilleure façon d'aborder cela, ou connaît une solution appropriée, faites le moi savoir :)

nous servons des fichiers scss dans un livre de contes en utilisant ce qui suit:

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

Cela fonctionne bien pour nous

@blemaire Où utilisez-vous cette ligne?

@blemaire Où utilisez-vous cette ligne?

@lopis crée simplement preview.js dans le dossier .storybook et place cette ligne dedans

Merci tout le monde. Confirmant que

• en ajoutant le fichier scss à .storybook (ou à n'importe quel endroit où vous souhaitez le placer).
• Création de .storybook/preview.js
• ajouter import '!style-loader!css-loader!sass-loader!./styles.scss'; au dir preview.js
• ajouter "css-loader" comme devDependency à package.json

travaille pour nous; storybook icw une bibliothèque Angular 9 (donc pas d'option pour l'ajouter au fichier angular.json )

Dans la configuration basée sur nextjs, une simple ligne de import "../styles/main.css"; (comme dans l'application principale) à .storybook/preview.js ajoute correctement les styles.

Les solutions ci-dessus fonctionnent si tout votre chemin est relatif ../../src/main.scss mais mon projet actuel utilise SCSS global / alias.

Ma configuration main.js webpack pour Storybook peut compiler l'alias. Mais quand j'essaye d'importer global / alias SCSS dans mon preview.js cela ne peut pas résoudre les chemins.

Je ne sais pas où aller.

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

J'ai essayé ceci, mais j'ai eu une erreur. J'ai besoin de Storybook pour connaître mes variables css globales et mes mixins.

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

Dans la configuration basée sur nextjs, une simple ligne de import "../styles/main.css"; (comme dans l'application principale) à .storybook/preview.js ajoute correctement les styles.

Ce styles / main.css contient-il vos variables SCSS globales? Est-ce qu'ils sont appliqués dans Storybook? J'ai essayé ceci, mais je reçois toujours SassError: Undefined variable: $my-variable-here

Salut @omaracrystal, voici comment je l'ai fait:
dans les fichiers .storybook/config.js , ajoutez l'importation avec les bons chargeurs incorporés:

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

Ensuite, ajoutez / importez tous les styles dont vous avez besoin dans le fichier 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 solution proposée par @kroeder fonctionne tant que vous utilisez des composants d'une application Angular mais pour les bibliothèques, vous ne pouvez pas ajouter la propriété styles dans le fichier angular.json

Cela fonctionne-t-il pour tout le monde? Ne travaille pas de mon côté :(

Nan. Cela ne m'aide pas non plus. J'obtiens cette erreur maintenant:

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

Décrivez le bogue
J'ai essayé plusieurs façons d'incorporer des styles globaux (scss) une fois pour toutes les Iframes de Storybook et j'ai échoué. Il ne semble pas y avoir de moyen clair et concis de le faire.

Reproduire
Tentatives:

1. 
   
   • Importez les styles globaux dans chaque composant.
   
   
   • Résultats: les styles sont appliqués, mais plusieurs styles global.scss sont répétés {story #} x fois.
   
   
2. 
   
   • Suivez les instructions ici pour la configuration personnalisée du webpack: https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • Résultats: il semble que cela indique uniquement à Storybook de lire le scss, ne configure pas réellement un fichier global qui est appliqué à toutes les histoires
   
   
3. 
   
   • Un endroit recommande de créer un décorateur pour Storybook et d'appliquer le CSS «global» de cette façon.
   
   
   • Résultat: ne fonctionnerait pas pour ce que j'essaie de faire (styles multiples, mixins, variables, etc.) Cela ne fonctionne que pour de petits changements CSS
   
   
4. 
   
   • Dans la configuration sous .storybook require ('../ libs / storybook / global-styles.scss'); dans la fonction loadStories
   
   
   • Résultat: rien
   
   
5. 
   
   • J'ai essayé d'importer les styles globaux dans le Storybook index.ts
   
   
   • Résultat: rien
   
   

6. • J'ai essayé d'ajouter les styles globaux via le fichier angular.json

     • Résultat: rien

Comportement prévisible
Je m'attendrais à pouvoir importer des fichiers globaux (scss) en un seul endroit afin qu'ils puissent être appliqués à l'Iframe de chaque histoire. Pourrait-il y avoir un paramètre de configuration dont je ne suis pas au courant?

Système:

• OS: MacOS
• Appareil: Macbook Pro 2015
• Navigateur: Chrome
• Cadre: angulaire
• Addons: - [addon-centré, addon-viewport, addon-info]
• Version: [^ 5.0.1]

Contexte supplémentaire
J'espère qu'il me manque une configuration dans le livre d'histoires qui rendrait cela simple à résoudre.

Avez-vous déjà résolu ce problème? Si oui, quelle était la solution? Merci!

@caseytrombley La solution est d'ajouter import '!style-loader!css-loader!sass-loader!./styles.scss'; à votre preview.js.

Pour Create React App + Storybook, j'ai ajouté ce qui suit à config.js pour appliquer ma réinitialisation CSS à Storybook.

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

Quelqu'un a-t-il une solution qui fonctionne pour postcss-scss?

Vous pouvez lire le blog que j'ai écrit qui parle exactement de l' implémentation des constantes SCSS pour votre livre de contes via une configuration webpack personnalisée.

Il y a un défaut que j'ai enregistré pour expliquer le bogue de configuration actuel https://github.com/storybookjs/storybook/issues/11052 et le blog que j'ai écrit pour contourner le problème.

J'espère que cela t'aides!

Pour les installations qui ont main.js (c'est-à-dire que vous avez exécuté npx -p @storybook/cli sb init dans un projet CreateReactApp), ajoutez simplement preview.js tant que frère, puis procédez comme suit:

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

S'il se plaint qu'un de ces chargeurs n'est pas installé (ils devraient l'être s'il s'agit d'un projet CRA), installez-les simplement manuellement (c'est- yarn add style-loader css-loader dire

Verrouiller le fil pour que les gens puissent simplement sauter en bas pour trouver une solution lorsque la solution à vote positif / obsolète échoue?

@garrettmaring avez-vous essayé avec .storybook/preview.js plutôt que .storybook/config.js ?

Lorsque je crée un fichier styles.css dans le même répertoire et l'importe avec import './styles.css'; dans mon fichier preview.js , mon livre de contes est soudainement bloqué dans un état de chargement ... :(

Une idée comment résoudre ça?

J'utilise Storybook avec la configuration open-wc pour les composants Web et j'ai un preview.js et un fichier main.js dans mon dossier .storybook .

@dcts qui pourrait être parce que votre ./styles.css fait référence aux utilitaires Tailwind, en utilisant certaines fonctionnalités qui doivent être prétraitées, ou d'une autre manière "cassée" en tant que fichier autonome.

J'avais besoin de faire trois choses:

1. Créez un fichier css d'entrée. Pour moi, c'est css/tailwind.css où j'importe tout ce dont j'ai besoin pour ma configuration Tailwind.
2. Lors de l'exécution du livre d'histoires, créez d'abord ce fichier. Pour moi, c'était une commande PostCSS postcss css/tailwind.css -o css/index.css
3. Dans .storybook/preview.js (créez ce fichier si nécessaire) ajoutez import '../css/index.css

J'utilise Twin et je peux utiliser ce composant comme prévu:

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

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

Je pense qu'une meilleure solution serait d'éditer la configuration du pack web de storybook pour gérer l'étape postcss.

J'utilise Vue.js avec scss. Mon problème est que lors de l'importation de scss global dans preview.js, mes devtolls chrome sont très lents et inutilisables. Quelqu'un a-t-il le même problème? Des alternatives? J'essaie de ne pas importer de scss global dans chacune de mes histoires.

Les solutions ci-dessus ont fonctionné d'une certaine manière, mais cette méthode __de la documentation officielle__ élimine le problème dans l'ensemble du projet.

En bref, nous devons étendre la configuration de Webpack pour définir les chargeurs scss.

Exemple de code à partir de documents officiels

// .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;
  },
};

Usage

Maintenant, vous pouvez importer des fichiers scss comme toujours dans .storybook/preview.js :

// .storybook/preview.js

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

// ...

... et même dans vos composants aussi:

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

<template>
  ...
</template>

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

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

J'ai rencontré un problème où l'importation d'un projet SCSS de grande taille à partir de preview.js entraîne des temps de recompilation de plus de 5 secondes sur toute modification apportée à quoi que ce soit dans le projet. Déplacer cela dans une histoire ramène tout à <1 s de recompilation.

J'utilise Storybook avec Gatsby et les préréglages scss standard . Après avoir importé le fichier global.scss dans preview.js les styles sont sélectionnés, mais si je définis des variables dans global.scss et que je les utilise dans un composant, l'erreur suivante est déclenchée:

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".

Je soupçonne que le fichier global.scss est chargé trop tard, mais je ne sais pas comment le configurer correctement. C'est peut-être même un bogue, car l'ajout de styles globaux à preview.js est la méthode recommandée.

Mettre à jour

Ce n'est pas l'ordre. Si j'écris ce qui suit dans global.scss.

body {
    background-color: black;
}

et ce qui suit dans Button.scss:

body {
  background-color:green;
}

La couleur de fond est en fait verte. Cela signifie que Buttons.scss est chargé après Global.scss comme il se doit, mais les variables ne sont toujours pas récupérées.

Solution
Oui, j'ai beaucoup appris aujourd'hui. Le principal problème était que les variables sass ne sont définies que dans le fichier dans lequel elles sont déclarées par défaut. Si vous souhaitez utiliser des variables dans les fichiers, vous devez utiliser sass-modules. L'ancienne méthode consistait à utiliser @import , mais la nouvelle méthode préférée est @use. Je démarre chaque module comme button.scss avec @use pathtomodule/global.scss . Dans mon cas, cela rend l'importation dans preview.js redondante.

Il y avait un autre piège. @use n'est actuellement pris en charge que par dart sass. J'ai installé node-sass ( npm i node-sass --save-dev ). Il existe un package appelé dart-sass ( npm i dart-sass --save-dev ), mais ce n'est pas le bon pour les préréglages mentionnés précédemment. Dart sass est devenu un sass régulier . Vous pouvez simplement l'installer avec npm i sass --save-dev .

Salut @Piepongwong ,

Je n'utilise pas Gatsby mais dans Vue, j'ai résolu ce problème en plaçant toutes les importations de mixin et de variables dans un fichier nommé _common.scss et en l'important dans des composants comme celui-ci:

<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 cette façon, je suis toujours sûr que mes mixins et variables existent, mais sachez que vous devez résumer correctement tous vos composants et variables. Vous pouvez consulter inuitcss pour les meilleures pratiques.

J'espère que cela t'aides.

Salut @omaracrystal, voici comment je l'ai fait:
dans les fichiers .storybook/config.js , ajoutez l'importation avec les bons chargeurs incorporés:

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

Ensuite, ajoutez / importez tous les styles dont vous avez besoin dans le fichier 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 solution proposée par @kroeder fonctionne tant que vous utilisez des composants d'une application Angular mais pour les bibliothèques, vous ne pouvez pas ajouter la propriété styles dans le fichier angular.json

Cela fonctionne-t-il pour tout le monde? Ne travaille pas de mon côté :(

pas pour moi: (j'ai essayé avec next.js et reactstrap mais il n'a pas chargé le app.scss à partir de mon dossier de style: /

Salut @omaracrystal, voici comment je l'ai fait:
dans les fichiers .storybook/config.js , ajoutez l'importation avec les bons chargeurs incorporés:

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

Ensuite, ajoutez / importez tous les styles dont vous avez besoin dans le fichier 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 solution proposée par @kroeder fonctionne tant que vous utilisez des composants d'une application Angular mais pour les bibliothèques, vous ne pouvez pas ajouter la propriété styles dans le fichier angular.json

Cela fonctionne-t-il pour tout le monde? Ne travaille pas de mon côté :(

pas pour moi: (j'ai essayé avec next.js et reactstrap mais il n'a pas chargé le app.scss à partir de mon dossier de style: /

Essayez la manière @hayatbiralem - cela devrait fonctionner.

Cela a fonctionné pour moi dans la dernière version du livre de contes @storybook/[email protected] J'espère que cela aide quelqu'un!

// .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;
  },
}