Storybook: Wie füge ich globale Stile (scss) einmal für alle Storybook-Iframes ein?

Versuchen Sie, Ihre global.scss-Datei in angular.json hinzuzufügen

Überprüfen Sie Ihr defaultProject (es gibt eine defaultProject-Eigenschaft im json) und fügen Sie es der Stile-Liste hinzu

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

Ich mache es so und es funktioniert gut. Ist das eine Option für Sie?

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Hallo @omaracrystal hier ist wie ich es gemacht habe:
Fügen Sie in den .storybook/config.js -Dateien den Import mit den richtigen Inlodern hinzu:

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

Fügen Sie dann alle benötigten Stile in die Datei scss-loader.scss / importieren Sie sie:

$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;
}

Die von @kroeder vorgeschlagene styles in der Datei angle.json hinzufügen

Versuchen Sie, Ihre global.scss-Datei in angular.json hinzuzufügen

Überprüfen Sie Ihr defaultProject (es gibt eine defaultProject-Eigenschaft im json) und fügen Sie es der Stile-Liste hinzu

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

Ich mache es so und es funktioniert gut. Ist das eine Option für Sie?

Ich habe genau das getan, aber es scheint mir das nicht zu laden, wenn ich ein Storybook starte

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Hey, ich bin es wieder! Ich werde dieses Problem schließen, um unseren Betreuern zu helfen, sich stattdessen auf die aktuelle Entwicklungs-Roadmap zu konzentrieren. Wenn das erwähnte Problem weiterhin ein Problem darstellt, öffnen Sie bitte ein neues Ticket und erwähnen Sie dieses alte. Prost und danke, dass du Storybook benutzt!

Hallo @omaracrystal hier ist wie ich es gemacht habe:
Fügen Sie in den .storybook/config.js -Dateien den Import mit den richtigen Inlodern hinzu:

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

Fügen Sie dann alle benötigten Stile in die Datei scss-loader.scss / importieren Sie sie:

$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;
}

Die von @kroeder vorgeschlagene styles in der Datei angle.json hinzufügen

Funktioniert das für alle? Ich arbeite nicht auf meiner Seite :(

@ozanmanav hast du versucht, es in .storybook/config.js importieren?

PS: weil es für mich funktioniert, aber ich importiere nur .css Datei ohne Webpack-Loader

Dies scheint mit der Dateistruktur main.js von Storybook v5.3 nicht mehr zu funktionieren

@garrettmaring hast du es mit .storybook/preview.js anstatt mit .storybook/config.js versucht?

@ Garrettmaring
Ich habe es endlich für .css Dateien mit import '!style-loader!css-loader!./main.css' .
Zuerst habe ich versucht, mit der Webpack-Konfiguration zu spielen, aber ich habe alle meine benutzerdefinierten Regeln entfernt und sie wie oben eingefügt. Offensichtlich installiert npm die Lader.

@shilman ja, das hat es geschafft 👍 Ziemlich klar, als ich eine Dokumentation darüber sah. In der Hauptdokumentation zum Storybook ist möglicherweise Platz für klarere Dokumente. Ich fand diesen Artikel klar.

@garrettmaring Möchten Sie eine PR einreichen, um die Dokumente zu verbessern?

@ Garrettmaring
Ich habe es endlich für .css Dateien mit import '!style-loader!css-loader!./main.css' .
Zuerst habe ich versucht, mit der Webpack-Konfiguration zu spielen, aber ich habe alle meine benutzerdefinierten Regeln entfernt und sie wie oben eingefügt. Offensichtlich installiert npm die Lader.

Nur ein paar FYI, die ich gerade herausgefunden habe, dieser Ansatz wirkt Wunder, wenn das Storybook lokal bereitgestellt wird, aber er funktioniert nicht (wie ich gesehen habe) mit Build-Storybook.

Meine Lösung
Fügen Sie <link rel="stylesheet" href="./your-global-styles.css" /> zur Vorschau-head.html hinzu. Verwenden Sie dann das Flag -s im Verzeichnis your-global-styles.css , und kopieren Sie die Stile in das Erstellungsverzeichnis des Storybooks. Jetzt sollte die Datei iframe.html auf your-global-styles.css aus demselben Verzeichnis verweisen.

Das einzige Problem dabei ist, dass die Browserkonsole bei lokaler Ausführung anzeigt, dass localhost/your-global-styles.css aber dennoch wie beabsichtigt funktioniert.

Wenn jemand eine bessere Herangehensweise hat oder eine richtige Lösung kennt, lass es mich wissen :)

Wir liefern scss-Dateien im Storybook wie folgt:

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

Das funktioniert gut für uns

@blemaire Wo benutzt du diese Leitung?

@blemaire Wo benutzt du diese Leitung?

@lopis erstelle einfach preview.js im Ordner .storybook und füge diese Zeile ein

Vielen Dank an alle. Das bestätigen

• Hinzufügen der scss-Datei zu .storybook (oder an einem beliebigen Ort, an dem Sie sie ablegen möchten).
• Erstellen von .storybook/preview.js
• Hinzufügen von import '!style-loader!css-loader!sass-loader!./styles.scss'; zum Verzeichnis preview.js
• Hinzufügen von "css-loader" als devDependency zu package.json

arbeitet für uns; Das Storybook enthält eine Angular 9-Bibliothek (daher keine Option zum Hinzufügen zur Datei angular.json ).

Im nextjs-basierten Setup fügt eine einfache Zeile von import "../styles/main.css"; (wie in der Haupt-App) zu .storybook/preview.js Stile korrekt hinzu.

Die oben genannten Lösungen funktionieren, wenn alle Ihre Pfade relativ ../../src/main.scss , mein aktuelles Projekt jedoch SCSS global / alias verwendet.

Meine main.js Webpack-Konfiguration für Storybook kann den Alias ​​kompilieren. Wenn ich jedoch versuche, globales / Alias-SCSS in mein preview.js importieren, können die Pfade nicht aufgelöst werden.

Ich bin mir nicht sicher, wohin ich gehen soll.

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

Ich habe es versucht, aber Fehler bekommen. Ich brauche Storybook, um über meine globalen CSS-Variablen und Mixins Bescheid zu wissen.

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

Im nextjs-basierten Setup fügt eine einfache Zeile von import "../styles/main.css"; (wie in der Haupt-App) zu .storybook/preview.js Stile korrekt hinzu.

Enthält diese Datei / main.css Ihre globalen SCSS-Variablen? Werden sie überhaupt im Storybook angewendet? Ich habe es versucht, bekomme aber trotzdem SassError: Undefined variable: $my-variable-here

Hallo @omaracrystal hier ist wie ich es gemacht habe:
Fügen Sie in den .storybook/config.js -Dateien den Import mit den richtigen Inlodern hinzu:

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

Fügen Sie dann alle benötigten Stile in die Datei scss-loader.scss / importieren Sie sie:

$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;
}

Die von @kroeder vorgeschlagene styles in der Datei angle.json hinzufügen

Funktioniert das für alle? Ich arbeite nicht auf meiner Seite :(

Nee. Hilft mir auch nicht. Ich erhalte jetzt diesen Fehler:

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

Beschreibe den Fehler
Ich habe mehrere Möglichkeiten ausprobiert, globale Stile (scss) einmal für alle Storybook-Iframes zu integrieren, und war erfolglos. Es scheint keinen klaren und präzisen Weg zu geben, dies zu tun.

Reproduzieren
Versuche:

1. 
   
   • Importieren Sie die globalen Stile in jede Komponente.
   
   
   • Ergebnisse: Stile werden angewendet, aber mehrere global.scss-Stile werden {story #} x-mal wiederholt.
   
   
2. 
   
   • Befolgen Sie hier die Anweisungen für die benutzerdefinierte Webpack-Konfiguration: https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • Ergebnisse: Es scheint, dass dies Storybook nur anweist, das scss zu lesen, und keine globale Datei erstellt, die auf alle Storys angewendet wird
   
   
3. 
   
   • Ein Ort empfiehlt, einen Dekorateur für Storybook zu erstellen und das "globale" CSS auf diese Weise anzuwenden.
   
   
   • Ergebnis: Funktioniert nicht für das, was ich versuche (mehrere Stile, Mixins, Variablen usw.). Dies funktioniert nur bei kleinen CSS-Änderungen
   
   
4. 
   
   • In der Konfiguration unter .storybook erfordern ('../ libs / storybook / global-styles.scss'); innerhalb der loadStories-Funktion
   
   
   • Ergebnis: Nichts
   
   
5. 
   
   • Es wurde versucht, die globalen Stile in das Storybook index.ts zu importieren
   
   
   • Ergebnis: Nichts
   
   

6. • Es wurde versucht, die globalen Stile über die Datei angle.json hinzuzufügen

     • Ergebnis: Nichts

Erwartetes Verhalten
Ich würde erwarten, globale (scss) Dateien an einem Ort importieren zu können, damit sie auf den Iframe jeder Story angewendet werden können. Könnte es eine Konfigurationseinstellung geben, die mir nicht bekannt ist?

System:

• Betriebssystem: MacOS
• Gerät: Macbook Pro 2015
• Browser: Chrome
• Framework: Angular
• Addons: - [Addon-zentriert, Addon-Ansichtsfenster, Addon-Info]
• Version: [^ 5.0.1]

Zusätzlicher Kontext
Ich hoffe, dass mir eine Konfiguration im Storybook fehlt, die es einfach macht, dies zu beheben.

Haben Sie das jemals gelöst? Wenn ja, was war die Lösung? Vielen Dank!

@caseytrombley Die Lösung besteht darin, Ihrer Vorschau.js import '!style-loader!css-loader!sass-loader!./styles.scss'; hinzuzufügen.

Für Create React App + Storybook habe ich config.js Folgendes hinzugefügt, damit mein CSS-Reset auf Storybook angewendet wird.

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

Hat jemand eine Lösung für postcss-scss?

Sie können den Blog lesen, den ich geschrieben habe und der genau über die Implementierung von SCSS-Konstanten für Ihr Storybook über eine benutzerdefinierte Webpack-Konfiguration spricht.

Es gibt einen Fehler, den ich protokolliert habe, um den aktuellen Konfigurationsfehler https://github.com/storybookjs/storybook/issues/11052 und den Blog zu erklären, den ich als Workaround geschrieben habe.

Hoffe das hilft!

Fügen Sie für Installationen mit main.js (dh Sie haben npx -p @storybook/cli sb init in einem CreateReactApp-Projekt ausgeführt) einfach preview.js als Geschwister hinzu und gehen Sie dann folgendermaßen vor:

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

Wenn sich einer dieser Loader nicht installiert (es sollte sich um ein CRA-Projekt handeln), installieren Sie ihn einfach manuell (dh yarn add style-loader css-loader ).

Thread sperren, damit die Leute einfach nach unten springen können, um eine Lösung zu finden, wenn die hochgestufte / veraltete Lösung fehlschlägt?

@garrettmaring hast du es mit .storybook/preview.js anstatt mit .storybook/config.js versucht?

Wenn ich eine styles.css -Datei im selben Verzeichnis erstelle und sie mit import './styles.css'; in meine preview.js -Datei importiere, steckt mein Storybook plötzlich nur noch im Ladezustand fest ... :(

Irgendeine Idee, wie man das löst?

Ich verwende Storybook mit der Open-WC-Konfiguration für Webkomponenten und habe eine preview.js und eine main.js Datei in meinem .storybook Ordner.

@dcts , die möglicherweise daran ./styles.css auf Tailwind-Dienstprogramme verweist, einige Funktionen verwendet, die vorverarbeitet werden müssen, oder auf andere Weise als eigenständige Datei "defekt" ist.

Ich musste drei Dinge tun:

1. Erstellen Sie eine Eingabe-CSS-Datei. Für mich ist dies css/tailwind.css wo ich alles importiere, was für mein Rückenwind-Setup benötigt wird.
2. Erstellen Sie beim Ausführen von Storybook zuerst diese Datei. Für mich war dies ein PostCSS-Befehl postcss css/tailwind.css -o css/index.css
3. Fügen Sie in .storybook/preview.js (diese Datei bei Bedarf erstellen) import '../css/index.css

Ich verwende Twin und kann diese Komponente wie erwartet verwenden:

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

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

Ich denke, eine bessere Lösung wäre, die Storybook-Webpack-Konfiguration zu bearbeiten, um den Post-CSS-Schritt zu handhaben.

Ich benutze Vue.js mit scss. Mein Problem ist, dass meine Chrome-Devtolls beim Importieren von globalem SCSS in die Vorschau.js sehr langsam und nicht verwendbar sind. Hat jemand das gleiche Problem? Irgendwelche Alternativen? Ich versuche, nicht in jede meiner Geschichten globale scss zu importieren.

Die oben genannten Lösungen haben auf eine Art und Weise funktioniert, aber diese Methode __ aus offiziellen Dokumenten __ beseitigt das Problem im gesamten Projekt.

Kurz gesagt, wir müssen die Webpack-Konfiguration erweitern, um SCSS-Loader festzulegen.

Beispielcode aus offiziellen Dokumenten

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

Verwendung

Jetzt können Sie scss-Dateien immer in .storybook/preview.js importieren:

// .storybook/preview.js

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

// ...

... und auch in Ihren Komponenten:

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

<template>
  ...
</template>

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

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

Ich bin auf ein Problem gestoßen, bei dem das Importieren eines umfangreichen SCSS-Projekts von preview.js einer Neukompilierungszeit von mehr als 5 Sekunden führt, wenn Änderungen an irgendetwas im Projekt vorgenommen werden. Wenn Sie dies irgendwie in eine Geschichte umwandeln, wird alles wieder auf <1s Rekompilierungszeiten reduziert.

Ich verwende Storybook mit Gatsby und den Standard-SCSS-Voreinstellungen . Nach dem Importieren der Datei global.scss in preview.js die Stile übernommen. Wenn ich jedoch Variablen in global.scss und sie in einer Komponente verwende, wird der folgende Fehler ausgelöst:

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

Ich vermute, dass die Datei global.scss zu spät geladen wird, aber ich weiß nicht, wie ich sie richtig konfigurieren soll. Vielleicht ist es sogar ein Fehler, weil das Hinzufügen globaler Stile zu preview.js die empfohlene Methode ist.

Aktualisieren

Es ist nicht die Reihenfolge. Wenn ich folgendes in global.scss schreibe.

body {
    background-color: black;
}

und Folgendes in Button.scss:

body {
  background-color:green;
}

Die Hintergrundfarbe ist tatsächlich grün. Dies bedeutet, dass Buttons.scss wie gewünscht nach Global.scss geladen wird, die Variablen jedoch immer noch nicht erfasst werden.

Lösung
Ja, ich habe heute viel gelernt. Das Hauptproblem bestand darin, dass Sass-Variablen nur in der Datei definiert werden, in der sie standardmäßig deklariert sind. Wenn Sie Variablen dateiübergreifend verwenden möchten, müssen Sie Sass-Module verwenden. Der alte Weg war, @import zu verwenden, aber der neue bevorzugte Weg ist @use. Ich starte jedes Modul wie button.scss mit @use pathtomodule/global.scss . In meinem Fall macht dies den Import in preview.js überflüssig.

Es gab noch einen Haken. @use wird derzeit nur von Dart Sass unterstützt. Ich hatte Node-Sass installiert ( npm i node-sass --save-dev ). Es gibt ein Paket namens dart-sass ( npm i dart-sass --save-dev ), aber das ist nicht das richtige für die zuvor genannten Voreinstellungen. Dart Sass ist zu normalem Sass geworden . Sie können es einfach mit npm i sass --save-dev installieren.

Hallo @Piepongwong ,

Ich verwende kein Gatsby, aber in Vue habe ich dieses Problem gelöst, indem ich alle Mixin- und Variablenimporte in eine Datei mit dem Namen _common.scss eingefügt und in Komponenten wie diese importiert habe:

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

Auf diese Weise bin ich mir immer sicher, dass meine Mixins und Variablen vorhanden sind, aber beachten Sie, dass Sie alle Ihre Komponenten und Variablen korrekt abstrahieren müssen. Sie können inuitcss nach Best Practices suchen.

Hoffe das hilft.

Hallo @omaracrystal hier ist wie ich es gemacht habe:
Fügen Sie in den .storybook/config.js -Dateien den Import mit den richtigen Inlodern hinzu:

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

Fügen Sie dann alle benötigten Stile in die Datei scss-loader.scss / importieren Sie sie:

$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;
}

Die von @kroeder vorgeschlagene styles in der Datei angle.json hinzufügen

Funktioniert das für alle? Ich arbeite nicht auf meiner Seite :(

Nicht für mich :( Ich habe es mit next.js und Reactstrap versucht, aber die app.scss wurde nicht aus meinem Style-Ordner geladen: /

Hallo @omaracrystal hier ist wie ich es gemacht habe:
Fügen Sie in den .storybook/config.js -Dateien den Import mit den richtigen Inlodern hinzu:

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

Fügen Sie dann alle benötigten Stile in die Datei scss-loader.scss / importieren Sie sie:

$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;
}

Die von @kroeder vorgeschlagene styles in der Datei angle.json hinzufügen

Funktioniert das für alle? Ich arbeite nicht auf meiner Seite :(

Nicht für mich :( Ich habe es mit next.js und Reactstrap versucht, aber die app.scss wurde nicht aus meinem Style-Ordner geladen: /

Versuchen Sie es mit @hayatbiralem - es sollte funktionieren.

Das hat bei mir in der neuesten Version des Storybooks funktioniert. @storybook/[email protected] Hoffe, das hilft jemandem!

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