Storybook: Bagaimana cara menyertakan gaya global (scss) satu kali untuk semua iframe Storybook?

Coba tambahkan File global.scss Anda ke angular.json

Periksa defaultProject Anda (ada properti defaultProject di dalam json) dan tambahkan ke daftar gaya

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

Saya melakukannya dengan cara itu dan bekerja dengan baik. Apakah itu pilihan untuk Anda?

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini belakangan ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan lanjutkan pembahasannya. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi, jadi kirimkan permintaan bantuan jika Anda ingin membantu. Masalah yang tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Hai @omaracrystal, inilah cara saya melakukannya:
di file .storybook/config.js , tambahkan impor dengan pemuat yang benar sebaris:

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

Kemudian tambahkan / impor semua gaya yang Anda butuhkan di file 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;
}

Solusi yang diusulkan oleh @kroeder berfungsi selama Anda menggunakan komponen dari aplikasi Angular tetapi untuk perpustakaan, Anda tidak dapat menambahkan properti styles di file angular.json

Coba tambahkan File global.scss Anda ke angular.json

Periksa defaultProject Anda (ada properti defaultProject di dalam json) dan tambahkan ke daftar gaya

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

Saya melakukannya dengan cara itu dan bekerja dengan baik. Apakah itu pilihan untuk Anda?

Saya melakukan hal ini persis, tetapi tampaknya tidak memuat ini untuk saya ketika saya menjalankan buku cerita

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini belakangan ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan lanjutkan pembahasannya. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi, jadi kirimkan permintaan bantuan jika Anda ingin membantu. Masalah yang tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Hai, ini aku lagi! Saya akan menutup masalah ini untuk membantu pengelola kami fokus pada peta jalan pengembangan saat ini. Jika masalah yang disebutkan masih menjadi perhatian, buka tiket baru dan sebutkan yang lama. Bersulang dan terima kasih telah menggunakan Buku Cerita!

Hai @omaracrystal, inilah cara saya melakukannya:
di file .storybook/config.js , tambahkan impor dengan pemuat yang benar sebaris:

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

Kemudian tambahkan / impor semua gaya yang Anda butuhkan di file 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;
}

Solusi yang diusulkan oleh @kroeder berfungsi selama Anda menggunakan komponen dari aplikasi Angular tetapi untuk perpustakaan, Anda tidak dapat menambahkan properti styles di file angular.json

Apakah itu berhasil untuk semua orang? Tidak bekerja di sisiku :(

@ozanmanav apakah Anda mencoba mengimpornya di .storybook/config.js ?

PS: karena bagi saya ini berfungsi tetapi saya hanya mengimpor file .css tanpa webpack-loader

Ini sepertinya tidak lagi berfungsi menggunakan struktur file main.js dari Storybook v5.3

@garrettmaring apakah Anda mencoba dengan .storybook/preview.js daripada .storybook/config.js ?

@tokopedia
Saya akhirnya berhasil mendapatkannya untuk .css file menggunakan import '!style-loader!css-loader!./main.css' .
Awalnya saya mencoba bermain-main dengan konfigurasi webpack, tetapi saya menghapus semua aturan khusus saya, dan menjadikannya seperti di atas. Jelas npm instal loader.

@shilman ya, berhasil 👍 Cukup jelas begitu saya melihat beberapa dokumentasi tentangnya. Mungkin ada beberapa ruang untuk dokumen yang lebih jelas di dokumentasi utama Buku Cerita. Saya menemukan artikel ini jelas.

@garrettmaring Bolehkah mengirimkan PR untuk membantu meningkatkan dokumen?

@tokopedia
Saya akhirnya berhasil mendapatkannya untuk .css file menggunakan import '!style-loader!css-loader!./main.css' .
Awalnya saya mencoba bermain-main dengan konfigurasi webpack, tetapi saya menghapus semua aturan khusus saya, dan menjadikannya seperti di atas. Jelas npm instal loader.

Hanya beberapa FYI yang baru saja saya ketahui, pendekatan ini bekerja dengan sangat baik saat menyajikan buku cerita secara lokal, tetapi tidak berhasil (dari apa yang saya lihat) dengan build-storybook.

Solusi saya
Tambahkan <link rel="stylesheet" href="./your-global-styles.css" /> ke preview-head.html. Kemudian gunakan tanda -s pada direktori your-global-styles.css , salin gaya tersebut ke direktori pembuatan buku cerita. Sekarang iframe.html "seharusnya" mereferensikan your-global-styles.css dari direktori yang sama.

Satu-satunya masalah adalah saat dijalankan secara lokal, konsol browser akan mengatakan tidak dapat menemukan localhost/your-global-styles.css tetapi masih berfungsi sebagaimana mestinya.

Jika ada yang memiliki cara yang lebih baik untuk melakukan ini, atau mengetahui solusi yang tepat, beri tahu saya :)

kami melayani file scss di buku cerita menggunakan berikut ini:

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

Ini bekerja dengan baik untuk kami

@ Blemaire Di mana Anda menggunakan baris itu?

@ Blemaire Di mana Anda menggunakan baris itu?

@lopis cukup buat preview.js di folder .storybook dan letakkan baris itu di dalamnya

Terimakasih semuanya. Mengkonfirmasi itu

• menambahkan file scss ke .storybook (atau di mana pun Anda ingin meletakkannya).
• Membuat .storybook/preview.js
• menambahkan import '!style-loader!css-loader!sass-loader!./styles.scss'; ke direktori preview.js
• menambahkan "css-loader" sebagai devDependency ke package.json

bekerja untuk kami; buku cerita icw an Angular 9 library (jadi tidak ada opsi untuk menambahkannya ke file angular.json )

Dalam pengaturan berbasis nextjs, baris sederhana dari import "../styles/main.css"; (seperti di aplikasi utama) hingga .storybook/preview.js menambahkan gaya dengan benar.

Solusi di atas berfungsi jika semua jalur Anda relatif ../../src/main.scss tetapi proyek saya saat ini menggunakan SCSS global / alias.

Konfigurasi main.js webpack saya untuk Storybook dapat mengkompilasi alias. Tetapi ketika saya mencoba mengimpor global / alias SCSS ke preview.js maka itu tidak dapat menyelesaikan jalur.

Tidak yakin ke mana harus pergi.

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

Saya mencoba ini, tetapi mendapatkan kesalahan. Saya perlu Buku Cerita untuk mengetahui tentang variabel dan mixin css global saya.

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

Dalam pengaturan berbasis nextjs, baris sederhana dari import "../styles/main.css"; (seperti di aplikasi utama) hingga .storybook/preview.js menambahkan gaya dengan benar.

Apakah styles / main.css ini berisi variabel SCSS global Anda? Apakah mereka diterapkan di Buku Cerita sama sekali? Saya mencoba ini, tetapi masih mendapatkan SassError: Undefined variable: $my-variable-here

Hai @omaracrystal, inilah cara saya melakukannya:
di file .storybook/config.js , tambahkan impor dengan pemuat yang benar sebaris:

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

Kemudian tambahkan / impor semua gaya yang Anda butuhkan di file 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;
}

Solusi yang diusulkan oleh @kroeder berfungsi selama Anda menggunakan komponen dari aplikasi Angular tetapi untuk perpustakaan, Anda tidak dapat menambahkan properti styles di file angular.json

Apakah itu berhasil untuk semua orang? Tidak bekerja di sisiku :(

Nggak. Tidak membantu saya juga. Saya mendapatkan kesalahan ini sekarang:

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

Jelaskan bugnya
Saya telah mencoba berbagai cara untuk menggabungkan gaya global (scss) sekali untuk semua Iframe Buku Cerita dan tidak berhasil. Tampaknya tidak ada cara ringkas yang jelas untuk melakukan ini.

Untuk Mereproduksi
Upaya:

1. 
   
   • Impor gaya global dalam setiap komponen.
   
   
   • Hasil: Gaya diterapkan, tetapi, beberapa gaya global.scss diulang {story #} x kali.
   
   
2. 
   
   • Ikuti petunjuk di sini untuk konfigurasi paket web khusus: https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • Hasil: Tampaknya ini hanya memberi tahu Storybook untuk membaca scss, tidak benar-benar menyiapkan file global yang diterapkan ke semua cerita
   
   
3. 
   
   • Satu tempat merekomendasikan untuk membuat dekorator untuk Storybook dan menerapkan css "global" seperti itu.
   
   
   • Hasil: tidak akan berfungsi untuk apa yang saya coba lakukan (banyak gaya, mixin, variabel, dll) Ini hanya berfungsi untuk perubahan kecil CSS
   
   
4. 
   
   • Dalam konfigurasi di bawah .storybook require ('../ libs / storybook / global-styles.scss'); dalam fungsi loadStories
   
   
   • Hasil: Tidak ada
   
   
5. 
   
   • Mencoba mengimpor gaya global dalam Storybook index.ts
   
   
   • Hasil: Tidak ada
   
   

6. • Mencoba menambahkan gaya global melalui file angular.json

     • Hasil: Tidak ada

Perilaku yang diharapkan
Saya berharap dapat mengimpor file Global (scss) di satu tempat sehingga dapat diterapkan ke setiap Iframe Story. Mungkinkah ada pengaturan konfigurasi yang tidak saya ketahui?

Sistem:

• OS: MacOS
• Perangkat: Macbook Pro 2015
• Browser: Chrome
• Kerangka: Sudut
• Addons: - [addon-centered, addon-viewport, addon-info]
• Versi: [^ 5.0.1]

Konteks tambahan
Saya berharap bahwa saya kehilangan beberapa konfigurasi dalam buku cerita yang akan membuat ini mudah untuk diselesaikan.

Apakah Anda pernah menyelesaikan ini? Jika ya, apa solusinya? Terima kasih!

@caseytrombley Solusinya adalah menambahkan import '!style-loader!css-loader!sass-loader!./styles.scss'; ke preview.js Anda.

Untuk Membuat Aplikasi React + Buku Cerita, saya menambahkan yang berikut ini ke config.js agar Reset CSS saya diterapkan ke Buku Cerita.

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

Ada yang punya solusi untuk postcss-scss?

Anda dapat membaca blog yang saya tulis yang membahas tentang penerapan konstanta SCSS untuk buku cerita Anda melalui konfigurasi webpack kustom.

Ada cacat yang saya catat menjelaskan bug konfigurasi saat ini https://github.com/storybookjs/storybook/issues/11052 dan blog yang saya tulis sebagai solusi.

Semoga ini membantu!

Untuk penginstalan yang memiliki main.js (yaitu Anda menjalankan npx -p @storybook/cli sb init dalam proyek CreateReactApp), cukup tambahkan preview.js sebagai saudara lalu lakukan ini:

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

Jika ada keluhan salah satu pemuat tersebut tidak diinstal (seharusnya jika itu adalah proyek CRA), cukup instal secara manual (yaitu yarn add style-loader css-loader ).

Kunci utas sehingga orang dapat melompat ke bawah untuk mencari solusi saat solusi yang diberi suara positif / tidak berlaku lagi gagal?

@garrettmaring apakah Anda mencoba dengan .storybook/preview.js daripada .storybook/config.js ?

Ketika saya membuat file styles.css di dalam direktori yang sama dan mengimpornya dengan import './styles.css'; di dalam file preview.js saya, buku cerita saya tiba-tiba macet dalam status memuat ... :(

Ada ide bagaimana menyelesaikannya?

Saya menggunakan buku cerita dengan konfigurasi open-wc untuk komponen web dan memiliki file preview.js dan main.js di dalam folder .storybook .

@dcts yang mungkin karena ./styles.css merujuk pada utilitas Tailwind, menggunakan beberapa fitur yang perlu diproses sebelumnya, atau dengan cara lain "dipecahkan" sebagai file mandiri.

Saya perlu melakukan tiga hal:

1. Buat file css masukan. Bagi saya, ini adalah css/tailwind.css tempat saya mengimpor semua yang diperlukan untuk penyiapan Tailwind saya.
2. Saat menjalankan buku cerita, buat file itu terlebih dahulu. Bagi saya, ini adalah perintah PostCSS postcss css/tailwind.css -o css/index.css
3. Dalam .storybook/preview.js (buat file itu jika perlu) tambahkan import '../css/index.css

Saya menggunakan Twin dan saya dapat menggunakan komponen ini seperti yang diharapkan:

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

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

Saya pikir solusi yang lebih baik adalah mengedit konfigurasi webpack buku cerita untuk menangani langkah postcss.

Saya menggunakan Vue.js dengan scss. Masalah saya adalah saat mengimpor scss global di preview.js devtolls chrome saya sangat lambat dan tidak dapat digunakan. Adakah yang mengalami masalah yang sama? Ada alternatif lain? Saya mencoba untuk tidak mengimpor global scss di setiap cerita saya.

Solusi di atas bekerja dengan cara tertentu, tetapi metode ini __dari dokumen resmi__ menghilangkan masalah di seluruh proyek.

Singkatnya, kita perlu memperluas konfigurasi Webpack untuk mengatur pemuat scss.

Kode sampel dari dokumen resmi

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

Pemakaian

Sekarang Anda dapat mengimpor file scss dalam .storybook/preview.js :

// .storybook/preview.js

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

// ...

... dan bahkan di komponen Anda juga:

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

<template>
  ...
</template>

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

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

Saya mengalami masalah di mana mengimpor proyek SCSS yang cukup besar dari preview.js menyebabkan waktu kompilasi ulang 5+ detik pada perubahan apa pun dalam proyek. Memindahkan ini ke dalam sebuah cerita entah bagaimana mengembalikan semuanya ke <1 detik waktu kompilasi ulang ..

Saya menggunakan Buku Cerita dengan Gatsby dan preset scss standar . Setelah mengimpor file global.scss ke preview.js gaya diambil, tetapi jika saya mendefinisikan variabel di global.scss dan menggunakannya dalam komponen, kesalahan berikut dipicu:

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

Saya curiga bahwa file global.scss terlambat dimuat, tetapi saya tidak tahu cara mengkonfigurasinya dengan benar. Bahkan mungkin itu bug, karena menambahkan gaya global ke preview.js adalah metode yang disarankan.

Memperbarui

Ini bukan urutannya. Jika saya menulis berikut ini di global.scss.

body {
    background-color: black;
}

dan berikut ini di Button.scss:

body {
  background-color:green;
}

Warna latar belakang sebenarnya hijau. Ini berarti Buttons.scss dimuat setelah Global.scss sebagaimana mestinya, tetapi variabel masih belum diambil.

Larutan
Ya ampun, saya belajar banyak hari ini. Masalah utamanya adalah bahwa variabel sass hanya didefinisikan dalam file yang dideklarasikan secara default. Jika Anda ingin menggunakan variabel di seluruh file, Anda harus menggunakan sass-modules. Cara lama adalah menggunakan @import , tetapi cara baru yang disukai adalah @use. Saya memulai setiap modul seperti button.scss dengan @use pathtomodule/global.scss . Dalam kasus saya ini membuat impor di preview.js berlebihan.

Ada tangkapan lain. @use saat ini hanya didukung oleh dart sass. Saya telah menginstal node-sass ( npm i node-sass --save-dev ). Ada sebuah paket bernama dart-sass ( npm i dart-sass --save-dev ), tetapi itu bukan paket yang benar untuk preset yang disebutkan sebelumnya. Dart sass telah menjadi sass biasa . Anda cukup menginstalnya dengan npm i sass --save-dev .

Hai @Piongwong ,

Saya tidak menggunakan Gatsby tetapi di Vue saya menyelesaikan masalah itu dengan menempatkan semua impor mixin dan variabel ke dalam satu file bernama _common.scss dan mengimpornya dalam komponen seperti ini:

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

Dengan cara ini saya selalu yakin bahwa mixin dan variabel saya ada tetapi perlu diketahui bahwa Anda perlu mengabstraksi semua komponen dan variabel dengan benar. Anda dapat melihat inuitcs untuk praktik terbaik.

Semoga ini membantu.

Hai @omaracrystal, inilah cara saya melakukannya:
di file .storybook/config.js , tambahkan impor dengan pemuat yang benar sebaris:

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

Kemudian tambahkan / impor semua gaya yang Anda butuhkan di file 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;
}

Solusi yang diusulkan oleh @kroeder berfungsi selama Anda menggunakan komponen dari aplikasi Angular tetapi untuk perpustakaan, Anda tidak dapat menambahkan properti styles di file angular.json

Apakah itu berhasil untuk semua orang? Tidak bekerja di sisiku :(

bukan untuk saya :( saya mencoba dengan next.js dan reactstrap tetapi tidak memuat app.scss dari folder gaya saya: /

Hai @omaracrystal, inilah cara saya melakukannya:
di file .storybook/config.js , tambahkan impor dengan pemuat yang benar sebaris:

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

Kemudian tambahkan / impor semua gaya yang Anda butuhkan di file 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;
}

Solusi yang diusulkan oleh @kroeder berfungsi selama Anda menggunakan komponen dari aplikasi Angular tetapi untuk perpustakaan, Anda tidak dapat menambahkan properti styles di file angular.json

Apakah itu berhasil untuk semua orang? Tidak bekerja di sisiku :(

bukan untuk saya :( saya mencoba dengan next.js dan reactstrap tetapi tidak memuat app.scss dari folder gaya saya: /

Coba cara @hayatbiralem - seharusnya berhasil.

Ini berhasil untuk saya di versi terbaru buku cerita @storybook/[email protected] Semoga ini bisa membantu seseorang!

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