Storybook: मैं एक स्टोरीबुक के अंदर सीएसएस फ्रेमवर्क शैलियों का उपयोग कैसे कर सकता हूं

को निर्मित 3 अप्रैल 2016 · 35टिप्पणियाँ · स्रोत: storybookjs/storybook

मान लीजिए कि मेरा आवेदन कुछ सीएसएस फ्रेमवर्क जैसे कि सेमेटिक यूआई, बूटस्ट्रैप या कुछ इस तरह से आधारित है। मैं आसानी से उस शैली को कहानी की किताब के अंदर कैसे शामिल कर सकता हूं ताकि मेरे घटक सही ढंग से प्रदर्शित हों?

compatibility with other tools question / support

स्रोत

croogie

👍11

सबसे उपयोगी टिप्पणी

प्रलेखन में पाया गया: https://storybook.js.org/configurations/default-config/#css-

blairanderson 16 जून 2017

👍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 3 अप्रैल 2016

😕23 👎21

लिंक टूट गया है और मैं इसे वर्तमान मास्टर में फ़ाइल में नहीं ढूँढ सकता।

andrioid 19 अक्तू॰ 2016

👍33

इसे देखें: https://getstorybook.io/docs/configurations/custom-webpack-config

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

arunoda 19 अक्तू॰ 2016

👎20 😕15

धन्यवाद। एक आसान तरीका ".storybook" निर्देशिका में एक head.html फ़ाइल जोड़ना था बूटस्ट्रैप या शब्दार्थ यूआई के लिए तत्व

UPD 2017-08-17 (@hypnos)
अब यह preview_head.html

andrioid 19 अक्तू॰ 2016

👍24 👎2

धन्यवाद head.html विधि पूरी तरह से काम करती है!

wmhafiz 14 नव॰ 2016

क्या head.html भी इसके बारे में जाने का सबसे अच्छा तरीका होगा यदि आप जो फ़ाइल जोड़ रहे हैं वह URL के माध्यम से नहीं है, बल्कि स्थानीय रूप से होस्ट की गई है? वह कैसे काम करेगा?

felipecocco 10 दिस॰ 2016

👍6

दोनों लिंक टूट गए हैं।

kirkstrobeck 17 मई 2017

👍9

टूटे हुए लिंक के लिए क्षमा करें, यह दुर्भाग्य से हमारे पुनर्गठन का परिणाम है, खोजने का एकमात्र तरीका खोज है।

आप क्या देख रहे हैं / @kirkstrobeck के साथ मदद की ज़रूरत है? यह मुद्दा काफी पुराना और बंद है।
यदि आपको कोई विशेष समस्या है तो हम आपकी सहायता कर सकते हैं, तो आइए जानते हैं problem

ndelangen 17 मई 2017

मैं यहां यह जानने की कोशिश कर रहा हूं कि रिएक्ट स्टोरीबुक को एक वास्तविक एप्लिकेशन में कैसे एकीकृत किया जाए जहां हमारी सभी शैलियां app/assets/stylesheets में scss फाइलों में हों।

sergiotapia 24 मई 2017

👍6

आपको हमारे वेबपैक कॉन्फिगरेशन को बढ़ाने / अपने स्वयं के कस्टम वेबपैक कॉन्फिगरेशन प्रदान करने की आवश्यकता होगी।

इसमें आपको webpack को .scss -files के साथ क्या करना है, यह बताना होगा। उर्फ, आपको sass-loader जोड़ने की आवश्यकता है।

संभवतः आपके पास ऐप के लिए यह पहले से ही सेटअप है, और आप इसे वेबपैक कॉन्फिग से ज्यादातर कॉपी-पेस्ट कर सकते हैं?

ndelangen 24 मई 2017

प्रलेखन में पाया गया: https://storybook.js.org/configurations/default-config/#css-

blairanderson 16 जून 2017

👍32 ❤10 👎4 🎉3

@ वरुणोदय संभव है कि ऊपर दिए गए दो लिंक को हटा दें जिन्हें मैंने ऊपर अंकित किया है। भविष्य में इस पृष्ठ में प्रवेश करने वाले अन्य लोगों के लिए समय की बचत करें। धन्यवाद!

achenwei-chwy 16 अग॰ 2017

भ्रमित प्रतिक्रियाएं शायद पर्याप्त हैं। मैंने उन्हें भी उकसाया।

kirkstrobeck 16 अग॰ 2017

बस पुरानी लिंक वाली टिप्पणियों को अपडेट किया

Hypnosphi 17 अग॰ 2017

👍2

कहानी की किताब के लिए हैडर फ़ाइल को preview-head.html संदर्भ कहा जाता है:
https://storybook.js.org/configurations/add-custom-head-tags/

LukasMac 24 अग॰ 2017

👍13 🎉1

मेरे "मुख्य" ऐप के भीतर मेरी वैश्विक शैलियों को जेएस फ़ाइल के भीतर परिभाषित किया गया है जो सभी वैश्विक सीएसएस नियमों वाले टेम्पलेट स्ट्रिंग को निर्यात करता है।
क्या सीएसएस परिभाषाओं के साथ एक टेम्पलेट स्ट्रिंग को इफ्रेम में जोड़ने का एक तरीका है जहां कहानियां प्रस्तुत की जाती हैं?

संपादित करें:
चूंकि मैं प्रतिक्रिया-शैली वाले घटकों का उपयोग कर रहा हूं, इसलिए अब मैं उनके injectGlobal सहायक का उपयोग कर रहा हूं।

flavordaaave 14 नव॰ 2017

@flavordaaave मुझे लगता है कि आप config.js से शैली-टैग में शैलियों को इंजेक्ट करना चाहते हैं

ndelangen 14 नव॰ 2017

@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 14 नव॰ 2017

👍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 15 नव॰ 2017

👍5

नमस्ते!
मैं अपनी स्टाइलशीट को स्टोरीबुक से लिंक करने की कोशिश कर रहा हूं, और मैं हड़ताली हूं।

मैंने अपनी सीएसएस फ़ाइल (जो मेरी परियोजना रूट में 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 त्रुटि का परिणाम है। I _think_ यह सिर्फ एक पाथ इशू हो सकता है, लेकिन स्टोरीबुक कहाँ चल रहा है, इसके सापेक्ष मुझे पता नहीं होना चाहिए कि मैं किस पथ का उपयोग करूं। कोई विचार?

bradfrost 28 मार्च 2018

यदि आपको 404 मिल रहे हैं क्योंकि आप सीएसएस एक सीडीएन पर नहीं हैं, तो आप एक स्थिर फ़ोल्डर के साथ स्टोरीबुक चलाने के लिए एक अतिरिक्त पैरामीटर पास कर सकते हैं और अपनी फाइलों को केवल ./some.css रूप में संदर्भित कर सकते हैं। storybook -p 9001 -s ./a-static-folder चलाएं और उस फ़ोल्डर में अपना सीएसएस डालें।

nickytonline 29 मार्च 2018

👍4

सुझाव के लिए धन्यवाद, @nickytonline दुर्भाग्य से यह काम नहीं कर रहा था। मेरे पास static/style.css में अपनी फाइलें हैं और मैंने कमांड storybook -p 9001 -s ./static भागा। जिसके परिणामस्वरूप storybook: command not found । मैंने npm run storybook -p 9001 -s ./static भाग लिए, जो फिर भी चला, लेकिन फिर भी मेरी स्टाइलशीट पर 404 त्रुटि हुई।

bradfrost 29 मार्च 2018

@bradfrost , सिर्फ स्पष्टीकरण के लिए, जब आप npm run storybook -p 9001 -s ./static , ./static जैसे / ./static करते हैं, इसलिए यदि आपकी फ़ाइल static/styles.css आपके प्रोजेक्ट में है आपका लिंक <link rel="stylesheet" href="./styles.css" /> नहीं <link rel="stylesheet" href="./static/styles.css" />

nickytonline 29 मार्च 2018

👍8

@nickytonline हां, मेरे पास <link rel="stylesheet" href="./styles.css" /> रूप में जुड़ी हुई चीजें थीं।

bradfrost 29 मार्च 2018

@bradfrost मुझे इस बात के लिए <link /> टैग के माध्यम से संदर्भित स्टोरीबुक में उपयोग की जा रही स्थिर संपत्ति का एक उदाहरण दिखाता है। यह यहां उपलब्ध है, https://github.com/nickytonline/for-brad

आप यहाँ संदर्भित शैली पत्रक देख सकते हैं, https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1

nickytonline 3 अप्रैल 2018

👍7 ❤2

@nickytonline डेमो प्रोजेक्ट के लिए बहुत बहुत धन्यवाद! मैं वास्तव में इसकी प्रशंसा करता हूँ।

इस समस्या को मैं अभी भी अपने मूल पोस्ट में परिलक्षित कर रहा हूं, जो कि परियोजना में शैलियों को प्राप्त करने के लिए import का उपयोग है। यदि फोंट या आइकन या पृष्ठभूमि छवियों जैसे संपत्ति हल नहीं करते हैं, तो यह विधि दुर्भाग्य से त्रुटियों को फेंक देती है। मुझे लगता है कि वहाँ रीमेडिंग के तरीके हैं, लेकिन मुझे लगता है कि मैं अपने दस्तावेज़ ओएल के फैशन तरीके से एक स्टाइलशीट लिंक करना चाह रहा हूं।

bradfrost 8 अप्रैल 2018

क्षमा करें, आपकी मूल पोस्ट की संपूर्ण सामग्री को अवशोषित न करने के लिए मेरा बुरा। अगर आप रिगामालेरो से बचना चाहते हैं तो यह अचार काफी है। गोना को उस बारे में थोड़ा सोचना होगा।

nickytonline 8 अप्रैल 2018

रूट फ़ोल्डर में एक 'सार्वजनिक' फ़ोल्डर बनाने के लिए आप क्या कर सकते हैं।
'सार्वजनिक / शब्दार्थ' फ़ोल्डर में 'node_modules / अर्थ-यूआई-सीएसएस' की सामग्री को डालें।
in package.json => स्क्रिप्ट्स => स्टोरीबुक => '' -s/public "जोड़ें
आखिरी चीज!!! अपने घटक में .less फ़ाइल do
अब आइकन को आसानी से काम करना चाहिए।

amos80m 8 जन॰ 2019

😕1

स्टोरीबुक v5 और normalize.css "फ्रेमवर्क" के लिए, यह import "normalize.css"; .storybook/config.js फ़ाइल में जोड़ने के लिए पर्याप्त है।

jmarceli 6 मई 2019

👍11 🎉3

@jmarceli यह मेरे लिए काम करता है, बहुत बहुत धन्यवाद!

anton-paskanny 17 मई 2019

क्या यह अभी भी v6 के साथ एक व्यवहार्य विकल्प है?

स्टोरीबुक v5 और normalize.css "फ्रेमवर्क" के लिए, यह import "normalize.css"; .storybook/config.js फ़ाइल में जोड़ने के लिए पर्याप्त है।

snyderhaus 30 मार्च 2020

@ snyderhaus हाँ, हालाँकि 5.3 config.js नरम-अप- परिवर्तन किया गया है और हम दृढ़ता से preview.js का उपयोग करने का सुझाव देते हैं। और जानकारी:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs- कॉन्फ़िगरेशन

shilman 31 मार्च 2020

मैं कई परियोजनाओं के लिए कई बार इस धागे पर आया हूं! तो यह मेरे स्वयं के संदर्भ के साथ-साथ किसी और के लिए भी है।

इसने मेरे लिए काम किया।

// 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 चर का उपयोग करके डिफ़ॉल्ट बूटस्ट्रैप थीम को ओवरराइड कर रहा है

मैं स्टोरीबॉक्‍स डिफ़ॉल्ट वेबपैक कॉन्‍फ़िगरेशन का उपयोग करने में सक्षम था और केवल शैली पत्रक का संदर्भ देता हूं, इसके अलावा, डॉक्स में दिखाए अनुसार मेरी 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 5 अप्रैल 2020

👍11

V6 + का उपयोग करने वाले किसी भी व्यक्ति के लिए config.js का उपयोग करने से समाधान काम नहीं करेगा।

मैं इसे इस तरह काम करने में कामयाब रहा हूं:

.storybook फ़ोल्डर में preview.js नामक फ़ाइल बनाएँ
बाहरी सीएसएस आयात करें। मेरे मामले में वे 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 12 अग॰ 2020

👍4

मेरे लिए जो काम किया गया था वह बूटस्ट्रैप पर आयात करना था ।/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

angelikipatrinou 24 अग॰ 2020

👍1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Storybook: मैं एक स्टोरीबुक के अंदर सीएसएस फ्रेमवर्क शैलियों का उपयोग कैसे कर सकता हूं

सबसे उपयोगी टिप्पणी

सभी 35 टिप्पणियाँ

संबंधित मुद्दों