Storybook: كيف أقوم بتضمين الأنماط العامة (scss) مرة واحدة لجميع إطارات Storybook iframes؟

حاول إضافة ملف global.scss إلى angular.json

تحقق من defaultProject (توجد خاصية defaultProject داخل json) وأضفها إلى قائمة الأنماط

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

أفعل ذلك بهذه الطريقة وهو يعمل بشكل جيد. غير أن خيارا بالنسبة لك؟

مرحباً بالجميع! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه المشكلة مؤخرًا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في مواصلة المناقشة. للأسف ، ليس لدينا الوقت لحل كل مشكلة. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال طلب سحب لنا إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 30 يومًا. شكر!

مرحبًا omaracrystal إليكم كيف فعلت ذلك:
في ملفات .storybook/config.js ، أضف الاستيراد مع وجود برامج التحميل الصحيحة المضمنة:

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

ثم أضف / استورد جميع الأنماط التي تحتاجها في ملف 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;
}

الحل الذي اقترحه kroeder يعمل طالما styles في ملف angular.json

حاول إضافة ملف global.scss إلى angular.json

تحقق من defaultProject (توجد خاصية defaultProject داخل json) وأضفها إلى قائمة الأنماط

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

أفعل ذلك بهذه الطريقة وهو يعمل بشكل جيد. غير أن خيارا بالنسبة لك؟

لقد فعلت هذا الشيء بالضبط ، لكن لا يبدو أنه تم تحميل هذا لي عندما أدير القصص المصورة

مرحباً بالجميع! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه المشكلة مؤخرًا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في مواصلة المناقشة. للأسف ، ليس لدينا الوقت لحل كل مشكلة. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال طلب سحب لنا إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 30 يومًا. شكر!

مرحبًا ، إنه أنا مرة أخرى! سأقوم بإغلاق هذه المشكلة لمساعدة المشرفين لدينا على التركيز على خارطة طريق التطوير الحالية بدلاً من ذلك. إذا كانت المشكلة المذكورة لا تزال مصدر قلق ، فيرجى فتح تذكرة جديدة وذكر هذه البطاقة القديمة. في صحتك وشكرا لاستخدام Storybook!

مرحبًا omaracrystal إليكم كيف فعلت ذلك:
في ملفات .storybook/config.js ، أضف الاستيراد مع وجود برامج التحميل الصحيحة المضمنة:

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

ثم أضف / استورد جميع الأنماط التي تحتاجها في ملف 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;
}

الحل الذي اقترحه kroeder يعمل طالما styles في ملف angular.json

هل هذا يعمل للجميع؟ لا تعمل من جانبي :(

ozanmanav هل حاولت استيراده بـ .storybook/config.js ؟

ملاحظة: لأنه يعمل بالنسبة لي ولكني أستورد ملف .css بدون أدوات تحميل webpack

يبدو أن هذا لم يعد يعمل باستخدام بنية ملف main.js لـ Storybook v5.3

هل جربتgarrettmaring باستخدام .storybook/preview.js بدلاً من .storybook/config.js ؟

تضمين التغريدة
لقد حصلت أخيرًا على ملفات .css باستخدام import '!style-loader!css-loader!./main.css' .
في البداية حاولت اللعب مع webpack config ، لكنني أزلت جميع القواعد المخصصة الخاصة بي ، وضمنتها كما هو مذكور أعلاه. من الواضح أن npm قم بتثبيت اللوادر.

@ shilman نعم ، لقد فعل ذلك 👍 من الواضح تمامًا بمجرد أن رأيت بعض الوثائق حوله. قد يكون هناك مجال للمستندات الأكثر وضوحًا في توثيق Storybook الرئيسي. لقد وجدت هذه المقالة لتكون واضحة.

garrettmaring هل تريد إرسال

تضمين التغريدة
لقد حصلت أخيرًا على ملفات .css باستخدام import '!style-loader!css-loader!./main.css' .
في البداية حاولت اللعب مع webpack config ، لكنني أزلت جميع القواعد المخصصة الخاصة بي ، وضمنتها كما هو مذكور أعلاه. من الواضح أن npm قم بتثبيت اللوادر.

فقط بعض لمعلوماتك التي اكتشفتها للتو ، هذا النهج يعمل بشكل رائع عند تقديم القصص القصيرة محليًا ، لكنه لا يعمل (مما رأيته) مع كتاب البناء.

بلدي الحل
أضف <link rel="stylesheet" href="./your-global-styles.css" /> إلى معاينة head.html. ثم استخدم علامة -s في دليل your-global-styles.css لنسخ الأنماط إلى دليل بناء كتاب القصة. الآن يشير "should" في iframe.html your-global-styles.css من نفس الدليل.

المشكلة الوحيدة في هذا عند التشغيل محليًا ، ستقول وحدة تحكم المتصفح أنها لا تستطيع العثور على localhost/your-global-styles.css لكنها لا تزال تعمل على النحو المنشود.

إذا كان لدى أي شخص طريقة أفضل للتعامل مع هذا ، أو كان يعرف حلاً مناسبًا ، فأخبرني :)

نخدم ملفات scss في القصص القصيرة باستخدام ما يلي:

استيراد '! style-loader! css-loader! sass-loader! ./ main.scss' ؛

هذا يعمل بشكل جيد بالنسبة لنا

blemaire أين تستخدم هذا الخط؟

blemaire أين تستخدم هذا الخط؟

lopis أنشئ فقط preview.js في المجلد .storybook وضع هذا السطر فيه

شكرا لكم جميعا. لتأكيد ذلك

• إضافة ملف scss إلى .storybook (أو أي مكان ترغب في وضعه).
• إنشاء .storybook/preview.js
• إضافة import '!style-loader!css-loader!sass-loader!./styles.scss'; إلى preview.js dir
• إضافة "css-loader" كإعتماد مطور إلى package.json

يعمل لدينا. Storybook icw مكتبة Angular 9 (لذلك لا يوجد خيار لإضافتها إلى ملف angular.json )

في الإعداد nextjs ، يضيف سطر بسيط من import "../styles/main.css"; (كما في التطبيق الرئيسي) إلى .storybook/preview.js الأنماط بشكل صحيح.

تعمل الحلول المذكورة أعلاه إذا كانت جميع مساراتك نسبيًا ../../src/main.scss لكن مشروعي الحالي يستخدم SCSS global / alias.

يمكن لتهيئة حزمة الويب الخاصة بي main.js لـ Storybook تجميع الاسم المستعار. ولكن عندما أحاول استيراد global / alias SCSS إلى preview.js فلن يتمكن من حل المسارات.

لست متأكدا إلى أين تذهب.

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

لقد حاولت هذا ، لكنني أخطأت. أحتاج إلى Storybook لمعرفة المزيد عن متغيرات وخلطات css العالمية.

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

في الإعداد nextjs ، يضيف سطر بسيط من import "../styles/main.css"; (كما في التطبيق الرئيسي) إلى .storybook/preview.js الأنماط بشكل صحيح.

هل تحتوي هذه الأنماط / main.css على متغيرات SCSS العالمية الخاصة بك؟ هل يتم تطبيقها في Storybook على الإطلاق؟ لقد جربت هذا ، ولكن ما زلت أحصل على SassError: Undefined variable: $my-variable-here

مرحبًا omaracrystal إليكم كيف فعلت ذلك:
في ملفات .storybook/config.js ، أضف الاستيراد مع وجود برامج التحميل الصحيحة المضمنة:

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

ثم أضف / استورد جميع الأنماط التي تحتاجها في ملف 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;
}

الحل الذي اقترحه kroeder يعمل طالما styles في ملف angular.json

هل هذا يعمل للجميع؟ لا تعمل من جانبي :(

لا. لا يساعدني أيضًا. لقد تلقيت هذا الخطأ الآن:

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

وصف الخطأ
لقد جربت طرقًا متعددة لدمج الأنماط العالمية (scss) مرة واحدة لجميع إطارات Storybook Iframes ولم تنجح. لا يبدو أن هناك طريقة واضحة ومختصرة للقيام بذلك.

لإعادة إنتاج
المحاولات:

1. 
   
   • استيراد الأنماط العامة داخل كل مكون.
   
   
   • النتائج: تم تطبيق الأنماط ، ولكن تتكرر عدة أنماط global.scss {story #} x مرة.
   
   
2. 
   
   • الإرشادات المتبعة هنا لتهيئة حزمة الويب المخصصة: https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • النتائج: يبدو أن هذا يخبر Storybook فقط بقراءة scss ، ولا يُنشئ في الواقع ملفًا عالميًا يتم تطبيقه على جميع القصص
   
   
3. 
   
   • يوصي مكان واحد بإنشاء مصمم ديكور لـ Storybook وتطبيق css "global" بهذه الطريقة.
   
   
   • النتيجة: لن تعمل مع ما أحاول القيام به (أنماط متعددة ، مزيج ، متغيرات ، إلخ) هذا يعمل فقط مع تغييرات CSS الصغيرة
   
   
4. 
   
   • في config ضمن .storybook يتطلب ('../ libs / storybook / global-styles.scss') ؛ ضمن وظيفة loadStories
   
   
   • النتيجة: لا شيء
   
   
5. 
   
   • حاولت استيراد الأنماط العامة داخل Storybook index.ts
   
   
   • النتيجة: لا شيء
   
   

6. • حاولت إضافة الأنماط العامة عبر ملف angular.json

     • النتيجة: لا شيء

سلوك متوقع
أتوقع أن أكون قادرًا على استيراد ملفات Global (scss) في مكان واحد بحيث يمكن تطبيقها على كل قصة Iframe. هل يمكن أن يكون هناك إعداد تهيئة لست على علم به؟

النظام:

• نظام التشغيل: MacOS
• الجهاز: Macbook Pro 2015
• المتصفح: Chrome
• الإطار: الزاوي
• الإضافات: - [addon-centered، addon-viewport، addon-info]
• الإصدار: [^ 5.0.1]

سياق إضافي
آمل أن أفتقد بعض التكوين في القصص القصيرة التي من شأنها أن تجعل هذا الحل سهلًا.

هل سبق لك من قبل حل ذلك؟ إذا كان الأمر كذلك ، فما هو الحل؟ شكر!

caseytrombley الحل هو إضافة import '!style-loader!css-loader!sass-loader!./styles.scss'; إلى preview.js.

بالنسبة إلى Create React App + Storybook ، أضفت ما يلي إلى config.js لتطبيق إعادة تعيين CSS على Storybook.

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

أي شخص لديه حل يعمل ل postcss-scss؟

يمكنك قراءة المدونة التي كتبتها والتي تتحدث بالضبط عن تنفيذ ثوابت SCSS لكتابك القصصي عبر تهيئة حزمة الويب المخصصة.

هناك عيب قمت بتسجيله لشرح خطأ التكوين الحالي https://github.com/storybookjs/storybook/issues/11052 والمدونة التي كتبتها كحل بديل.

أتمنى أن يساعدك هذا!

بالنسبة لعمليات التثبيت التي تحتوي على main.js (أي أنك قمت بتشغيل npx -p @storybook/cli sb init في مشروع CreateReactApp) ، ما عليك سوى إضافة preview.js كأخ ، ثم قم بما يلي:

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

إذا كانت تشتكي من عدم تثبيت أحد هذه اللوادر (يجب أن تكون كذلك إذا كان مشروع CRA) ، فقط قم بتثبيتها يدويًا (على سبيل المثال yarn add style-loader css-loader ).

هل تريد قفل الخيط حتى يتمكن الأشخاص من القفز إلى أسفل للتوصل إلى حل عندما يفشل الحل الذي تم التصويت عليه / تم إيقافه؟

هل جربتgarrettmaring باستخدام .storybook/preview.js بدلاً من .storybook/config.js ؟

عندما أقوم بإنشاء ملف styles.css داخل نفس الدليل واستيراده باستخدام import './styles.css'; داخل ملف preview.js ، فإن كتابي القصصي أصبح فجأة عالقًا في حالة تحميل ... :(

أي فكرة عن كيفية حل ذلك؟

أستخدم Storybook مع تهيئة open-wc لمكونات الويب ولديها ملف preview.js main.js وملف .storybook .

dcts قد ./styles.css يشير إلى أدوات Tailwind ، باستخدام بعض الميزات التي تحتاج إلى معالجة مسبقًا ، أو بطريقة أخرى "معطلة" كملف مستقل.

كنت بحاجة للقيام بثلاثة أشياء:

1. قم بإنشاء ملف إدخال css. بالنسبة لي ، هذا هو css/tailwind.css حيث أقوم باستيراد أي شيء مطلوب لإعداد Tailwind الخاص بي.
2. عند تشغيل كتاب القصة ، أنشئ هذا الملف أولاً. بالنسبة لي ، كان هذا أمر PostCSS postcss css/tailwind.css -o css/index.css
3. في .storybook/preview.js (أنشئ هذا الملف إذا لزم الأمر) أضف import '../css/index.css

أنا أستخدم Twin ويمكنني استخدام هذا المكون كما هو متوقع:

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

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

أعتقد أن الحل الأفضل هو تحرير تكوين webpack الخاص بكتاب القصة للتعامل مع خطوة postcss.

أنا أستخدم Vue.js مع scss. مشكلتي هي أنه عند استيراد scss العالمية في preview.js ، فإن ملفات chrome devtolls بطيئة جدًا وغير قابلة للاستخدام. أي شخص لديه نفس المشكلة؟ أي بدائل؟ أحاول عدم استيراد scss العالمية في كل من قصصي.

نجحت الحلول المذكورة أعلاه بطريقة ما ، ولكن هذه الطريقة __من المستندات الرسمية__ تحل المشكلة في المشروع بأكمله.

باختصار ، نحتاج إلى توسيع تهيئة Webpack لتعيين أدوات تحميل scss.

رمز عينة من المستندات الرسمية

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

إستعمال

يمكنك الآن استيراد ملفات scss في صورة .storybook/preview.js :

// .storybook/preview.js

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

// ...

... وحتى في مكوناتك أيضًا:

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

<template>
  ...
</template>

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

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

واجهت مشكلة حيث يتسبب استيراد مشروع SCSS كبير الحجم من preview.js إعادة تجميع أكثر من 5 ثوانٍ على أي تغيير في أي شيء في المشروع. نقل هذا إلى قصة بطريقة ما يعيد كل شيء إلى أقل من 1 ثانية.

أنا أستخدم Storybook مع Gatsby والإعدادات المسبقة القياسية scss . بعد استيراد ملف global.scss إلى preview.js ، يتم انتقاء الأنماط ، ولكن إذا قمت بتعريف المتغيرات في global.scss واستخدمتها في أحد المكونات ، فسيظهر الخطأ التالي:

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

أشك في أن الملف global.scss قد تم تحميله بعد فوات الأوان ، لكنني لا أعرف كيفية تكوينه بشكل صحيح. ربما يكون هذا خطأ ، لأن إضافة أنماط عامة إلى preview.js هي الطريقة الموصى بها.

تحديث

ليس الأمر. إذا كتبت ما يلي في global.scss.

body {
    background-color: black;
}

وما يلي في Button.scss:

body {
  background-color:green;
}

لون الخلفية هو في الواقع أخضر. هذا يعني أن Buttons.scss يتم تحميلها بعد Global.scss كما ينبغي ، لكن المتغيرات لا تزال غير منتقاة.

المحلول
نعم ، لقد تعلمت الكثير اليوم. كانت المشكلة الرئيسية هي أن متغيرات sass يتم تعريفها فقط في الملف الذي تم الإعلان عنه فيه افتراضيًا. إذا كنت تريد استخدام المتغيرات عبر الملفات ، فيجب عليك استخدام وحدات sass. كانت الطريقة القديمة هي استخدام import ، لكن الطريقة الجديدة المفضلة هيuse. أبدأ كل وحدة مثل button.scss باستخدام use pathtomodule/global.scss . في حالتي ، يجعل هذا الاستيراد في preview.js زائدًا عن الحاجة.

كان هناك صيد آخر. use مدعوم حاليًا بواسطة dart npm i node-sass --save-dev ). هناك حزمة تسمى dart-sass ( npm i dart-sass --save-dev ) ، لكن هذه ليست الحزمة الصحيحة للإعدادات المسبقة المذكورة سابقًا. أصبح دارت ساس ساس عادي . يمكنك ببساطة تثبيته بـ npm i sass --save-dev .

مرحبا Piepongwong ،

أنا لا أستخدم Gatsby ولكن في Vue قمت بحل هذه المشكلة بوضع جميع الواردات المتغيرة والمختلطة في ملف واحد باسم _common.scss واستوردها في مكونات مثل هذا:

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

بهذه الطريقة ، أنا متأكد دائمًا من وجود مزيجاتي ومتغيراتي ولكن عليك أن تدرك أنك بحاجة إلى تجريد جميع مكوناتك ومتغيراتك بشكل صحيح. يمكنك إلقاء نظرة على inuitcss للحصول على أفضل الممارسات.

أتمنى أن يساعدك هذا.

مرحبًا omaracrystal إليكم كيف فعلت ذلك:
في ملفات .storybook/config.js ، أضف الاستيراد مع وجود برامج التحميل الصحيحة المضمنة:

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

ثم أضف / استورد جميع الأنماط التي تحتاجها في ملف 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;
}

الحل الذي اقترحه kroeder يعمل طالما styles في ملف angular.json

هل هذا يعمل للجميع؟ لا تعمل من جانبي :(

ليس من أجلي :( حاولت استخدام next.js و رد الفعل لكن لم يتم تحميل app.scss من مجلد النمط الخاص بي: /

مرحبًا omaracrystal إليكم كيف فعلت ذلك:
في ملفات .storybook/config.js ، أضف الاستيراد مع وجود برامج التحميل الصحيحة المضمنة:

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

ثم أضف / استورد جميع الأنماط التي تحتاجها في ملف 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;
}

الحل الذي اقترحه kroeder يعمل طالما styles في ملف angular.json

هل هذا يعمل للجميع؟ لا تعمل من جانبي :(

ليس من أجلي :( حاولت استخدام next.js و رد الفعل لكن لم يتم تحميل app.scss من مجلد النمط الخاص بي: /

جرب طريقة hayatbiralem - يجب أن تعمل.

لقد نجح هذا الأمر بالنسبة لي في أحدث إصدار من Storybook @storybook/[email protected] آمل أن يساعد هذا شخصًا ما!

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