Storybook: كيف يمكنني استخدام أنماط إطار عمل CSS داخل كتاب قصص

تم إنشاؤها على ٣ أبريل ٢٠١٦ · 35تعليقات · مصدر: storybookjs/storybook

لنفترض أن تطبيقي يستند إلى بعض أطر عمل CSS مثل Semantic UI أو Bootstrap أو شيء من هذا القبيل. كيف يمكنني دمج هذه الأنماط بسهولة داخل كتاب قصة بحيث يتم عرض مكوناتي بشكل صحيح؟

compatibility with other tools question / support

مصدر

croogie

👍11

التعليق الأكثر فائدة

وجدت في الوثائق: https://storybook.js.org/configurations/default-config/#css -support

blairanderson في ١٦ يونيو ٢٠١٧

👍32 ❤10 👎4 🎉3

ال 35 كومينتر

نعم إنه كذلك. اقرأ هنا - https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md

هذا ليس ما تحتاجه ، فقط أعد فتح هذا.

UPD 2017-08-17 (hypnos)
https://storybook.js.org/configurations/add-custom-head-tags/

arunoda في ٣ أبريل ٢٠١٦

😕23 👎21

الارتباط معطل ولا يمكنني العثور عليه في الملف في الملف الرئيسي الحالي.

andrioid في ١٩ أكتوبر ٢٠١٦

👍33

تحقق من هذا: https://getstorybook.io/docs/configurations/custom-webpack-config

UPD 2017-08-17 (hypnos)
https://storybook.js.org/configurations/custom-webpack-config/

arunoda في ١٩ أكتوبر ٢٠١٦

👎20 😕15

شكر. كانت الطريقة الأسهل هي إضافة ملف head.html في دليل ".storybook" بامتداد عناصر Bootstrap أو Semantic UI

UPD 2017-08-17 (hypnos)
الآن هو preview_head.html

andrioid في ١٩ أكتوبر ٢٠١٦

👍24 👎2

شكرا طريقة head.html يعمل تماما!

wmhafiz في ١٤ نوفمبر ٢٠١٦

هل سيكون head.html أيضًا أفضل طريقة للقيام بذلك إذا لم يتم تقديم الملف الذي تضيفه من خلال عنوان URL ولكن تم استضافته محليًا بدلاً من ذلك؟ كيف سيعمل هذا

felipecocco في ١٠ ديسمبر ٢٠١٦

👍6

كلا الروابط معطلة.

kirkstrobeck في ١٧ مايو ٢٠١٧

👍9

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

ما الذي تبحث عنه / تحتاج إلى مساعدة بخصوصkirkstrobeck ؟ هذه القضية قديمة جدا ومغلقة.
إذا كانت لديك مشكلة معينة يمكننا مساعدتك فيها ، فأخبرنا بذلك.

ndelangen في ١٧ مايو ٢٠١٧

لقد هبطت هنا في محاولة لمعرفة كيفية دمج React Storybook في تطبيق حقيقي حيث تكون جميع أنماطنا في ملفات scss في app/assets/stylesheets

sergiotapia في ٢٤ مايو ٢٠١٧

👍6

ستحتاج إلى توسيع نطاق تهيئة حزمة الويب الخاصة بنا / توفير تهيئة حزمة الويب المخصصة الخاصة بك.

في ذلك ، ستحتاج إلى إخبار webpack بما يجب فعله بالملفات .scss . الملقب ، تحتاج إلى إضافة sass-loader .

من المحتمل أن يكون لديك بالفعل هذا الإعداد بالفعل لتطبيقك ، ويمكنك غالبًا النسخ واللصق من تكوين حزمة الويب الخاص به؟

ndelangen في ٢٤ مايو ٢٠١٧

وجدت في الوثائق: https://storybook.js.org/configurations/default-config/#css -support

blairanderson في ١٦ يونيو ٢٠١٧

👍32 ❤10 👎4 🎉3

arunoda هل من الممكن إزالة الرابطين أعلاه اللذين

achenwei-chwy في ١٦ أغسطس ٢٠١٧

ربما تكون ردود الفعل المشوشة كافية. أنا صوتت لهم أيضا.

kirkstrobeck في ١٦ أغسطس ٢٠١٧

فقط حدّث التعليقات بروابط قديمة

Hypnosphi في ١٧ أغسطس ٢٠١٧

👍2

يسمى ملف رأس كتاب القصة preview-head.html المرجع:
https://storybook.js.org/configurations/add-custom-head-tags/

LukasMac في ٢٤ أغسطس ٢٠١٧

👍13 🎉1

في تطبيقي "الرئيسي" ، يتم تحديد الأنماط العامة الخاصة بي في ملف JS الذي يصدر سلسلة نموذج تحتوي على جميع قواعد CSS العامة.
هل هناك طريقة لإضافة سلسلة قالب مع تعريفات CSS إلى iframe حيث يتم عرض القصص؟

تعديل:
نظرًا لأنني أستخدم مكونات على غرار رد الفعل ، فأنا الآن فقط أستخدم مساعدهم injectGlobal .

flavordaaave في ١٤ نوفمبر ٢٠١٧

flavordaaave أعتقد أنك سترغب في استخدام مجرد حقن الأنماط في علامة نمط من config.js

ndelangen في ١٤ نوفمبر ٢٠١٧

ndelangen حتى الآن لا تسمح لي كل إمكانيات حقن النمط العام ( import './styles.css'; أو عبر preview-head.html ) بإدخال الأنماط باستخدام المعلمات الديناميكية.

تبدو أسلوبي كالتالي:

/* .storybook/config.js */

import theme from './theme'

export default `
html {
  font-family: Helvetica;
  background: ${theme.canvas_ground};
  ...
}
`

حتى الآن أنا أستخدم المساعد injectGlobal من react-styled-components كما هو مذكور في EDIT أعلاه.

/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'

injectGlobal`${styles}`
...

flavordaaave في ١٤ نوفمبر ٢٠١٧

👍10

يمكنك تحقيق نتيجة مماثلة بهذا:

// create a <style></style> DOM element
const styleElement = document.createElement('style')
// put the text from styles variable between opening and closing <style> tags
styleElement.appendChild(document.createTextNode(styles))
// place the style element inside <head>
document.head.appendChild(styleElement)

Hypnosphi في ١٥ نوفمبر ٢٠١٧

👍5

مرحبا!
أحاول ربط ورقة الأنماط الخاصة بي بكتاب القصص ، وأقوم بإخراجها.

لقد اتبعت هذه الإرشادات لاستيراد ملف CSS الخاص بي (والذي يوجد في static/style.css في جذر مشروعي) بهذا السطر: import '../static/style.css'; . نتج عن ذلك خطأ في r

Error: Can't resolve '../i/link.svg' in [path]

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

لقد أضفت preview-head.html لكل هذه المستندات ، وربطت ورقة الأنماط الخاصة بي كما يلي:

<link rel="stylesheet" href="./static/style.css" />

ولكن ينتج عن هذا خطأ 404 للمورد. أعتقد أنه قد يكون مجرد مشكلة في المسار ، ولكن لا يمكنني العثور على المسار الذي يجب أن أستخدمه بالنسبة إلى مكان تشغيل Storybook. أيه أفكار؟

bradfrost في ٢٨ مارس ٢٠١٨

إذا كنت تحصل على 404s لأنك CSS ليس على CDN ، فيمكنك تمرير معلمة إضافية لتشغيل Storybook مع مجلد ثابت والإشارة إلى ملفاتك كـ ./some.css . قم بتشغيل storybook -p 9001 -s ./a-static-folder وضع ملف css في هذا المجلد.

nickytonline في ٢٩ مارس ٢٠١٨

👍4

شكرا على الاقتراح ،nickytonline. لسوء الحظ ، لا يبدو أن هذا يعمل. لدي ملفاتي في static/style.css وقمت بتشغيل الأمر storybook -p 9001 -s ./static . نتج عن ذلك storybook: command not found . قمت بتشغيل npm run storybook -p 9001 -s ./static والذي تم تشغيله ، ولكن لا يزال ينتج عنه خطأ 404 في ورقة الأنماط الخاصة بي.

bradfrost في ٢٩ مارس ٢٠١٨

bradfrost ، فقط للتوضيح ، عند تشغيل npm run storybook -p 9001 -s ./static ، ./static يتصرف مثل / في كتاب القصة ، لذلك إذا كان ملفك في static/styles.css في مشروعك ، سيكون الارتباط الخاص بك <link rel="stylesheet" href="./styles.css" /> وليس <link rel="stylesheet" href="./static/styles.css" />

nickytonline في ٢٩ مارس ٢٠١٨

👍8

nickytonline نعم ، لقد تم ربط الأشياء على أنها <link rel="stylesheet" href="./styles.css" /> .

bradfrost في ٢٩ مارس ٢٠١٨

bradfrost كان هذا يزعجني لأنه لا يعمل من أجلك ، لذا قمت بإنشاء ريبو أساسي جدًا باستخدام تطبيق create- <link /> . إنه متاح هنا ، https://github.com/nickytonline/for-brad

يمكنك رؤية ورقة الأنماط المشار إليها هنا ، https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1

nickytonline في ٣ أبريل ٢٠١٨

👍7 ❤2

nickytonline شكرًا جزيلاً على المشروع التجريبي! أنا فعلا أقدر ذلك.

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

bradfrost في ٨ أبريل ٢٠١٨

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

nickytonline في ٨ أبريل ٢٠١٨

ما يمكنك فعله هو إنشاء مجلد "عام" في المجلد الجذر.
في المجلد "public / semantic" ، يكون محتوى "node_modules / semantic-ui-css".
في package.json => scripts => storybook => إضافة "" -s ./public "
آخر شيء!!! في ملف .less المكون الخاص بك ، افعل import '/semantic/semantic.min.css' ؛
الآن يجب أن يعمل الرمز بسلاسة.

amos80m في ٨ يناير ٢٠١٩

😕1

بالنسبة لـ Storybook v5 و normalize.css "framework" ، يكفي إضافة import "normalize.css"; داخل ملف .storybook/config.js .

jmarceli في ٦ مايو ٢٠١٩

👍11 🎉3

jmarceli إنه يعمل معي ، شكرًا جزيلاً!

anton-paskanny في ١٧ مايو ٢٠١٩

هل لا يزال هذا خيارًا قابلاً للتطبيق مع الإصدار السادس؟

بالنسبة لـ Storybook v5 و normalize.css "framework" ، يكفي إضافة import "normalize.css"; داخل ملف .storybook/config.js .

snyderhaus في ٣٠ مارس ٢٠٢٠

snyderhaus نعم ، على الرغم من أن 5.3 config.js تم إهمالها بشكل بسيط ونقترح بشدة استخدام preview.js بدلاً من ذلك. مزيد من المعلومات:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs-config

shilman في ٣١ مارس ٢٠٢٠

لقد جئت إلى هذا الموضوع عدة مرات للعديد من المشاريع! لذلك هذا كمرجع خاص بي وكذلك لأي شخص آخر.

هذا عمل معي.

// storybook/config.js

import 'semantic-ui-css/semantic.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import '!style-loader!css-loader!sass-loader!../client/scss/style.scss';

يتخطى style.scss سمة التمهيد الافتراضية باستخدام متغيرات sass

وكنت قادرا على استخدام قصص الافتراضي webpack التكوين ومجرد مرجع أوراق الأنماط مثل ذلك، بالإضافة إلى ذلك باستخدام بناء الجملة محمل مضمنة لبلدي sass الملفات، كما هو مبين في المستندات .

"babel-core": "6.26.0",
"babel-loader": "7.1.4",
"@storybook/react": "^5.3.14",
"sass-loader": "^8.0.2",
"css-loader": "^3.4.2",
"style-loader": "0.20.3",
"react": "^16.3.2",

scottc11 في ٥ أبريل ٢٠٢٠

👍11

بالنسبة لأي شخص يستخدم الإصدار 6 + لن يعمل الحل باستخدام config.js .

لقد تمكنت من جعلها تعمل كما يلي:

أنشئ ملفًا باسم preview.js في المجلد .storybook
استيراد ملف css الخارجي. في حالتي كانت ملفات scss لذا قمت باستيرادها على النحو التالي:

// .storybook/preview.js

import '!style-loader!css-loader!sass-loader!@company/framework/src/styles.sass'
import '!style-loader!css-loader!sass-loader!./cssoverrides.sass'

تمت إضافة الاستيراد الثاني لتجاوز بعض الأنماط العامة الافتراضية.

هيكل مجلدي:

.storybook
│   cssoverrides.sass
│   main.js  
│   preview.js

الحزم المستخدمة:

"@storybook/react": "^6.0.0",
"react": "^16.13.1",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"sass-loader": "^9.0.3",
"css-loader": "^4.2.1",
"style-loader": "^1.2.1"

gkortsit في ١٢ أغسطس ٢٠٢٠

👍4

ما نجح بالنسبة لي هو استيراد bootstrap على ./storybook/preview.js

//I added this:
import 'bootstrap-4-grid/css/grid.min.css';

//this was already there
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

https://storybook.js.org/docs/react/configure/styling-and-css#importing -css-files