Storybook: सभी स्टोरीबुक iframes के लिए मैं एक बार वैश्विक शैलियों (scss) को कैसे शामिल करूं?

अपने Global.scss फ़ाइल को angular.json में जोड़ने का प्रयास करें

अपने DefaultProject की जाँच करें (json के अंदर एक defaultProject प्रॉपर्टी है) और इसे स्टाइल सूची में जोड़ें

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

@ क्रोडर द्वारा प्रस्तावित समाधान एक कोणीय अनुप्रयोग से आपके घटकों के उपयोग के रूप में लंबे समय तक काम करता है लेकिन पुस्तकालयों के लिए, आप कोणीय में styles संपत्ति नहीं जोड़ सकते हैं। फ़ाइल फ़ाइल

अपने Global.scss फ़ाइल को angular.json में जोड़ने का प्रयास करें

अपने DefaultProject की जाँच करें (json के अंदर एक defaultProject प्रॉपर्टी है) और इसे स्टाइल सूची में जोड़ें

"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="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;
}

@ क्रोडर द्वारा प्रस्तावित समाधान एक कोणीय अनुप्रयोग से आपके घटकों के उपयोग के रूप में लंबे समय तक काम करता है लेकिन पुस्तकालयों के लिए, आप कोणीय में styles संपत्ति नहीं जोड़ सकते हैं। फ़ाइल फ़ाइल

क्या वह सभी के लिए काम कर रहा है? मेरे पक्ष में काम नहीं कर रहा :(

@ozanmanav क्या आपने इसे .storybook/config.js आयात करने की कोशिश की?

पुनश्च: क्योंकि मेरे लिए यह काम करता है, लेकिन मैं वेबपैक लोडर के बिना .css फ़ाइल आयात करता हूं

ऐसा लगता है कि स्टोरीबुक v5.3 के main.js फ़ाइल संरचना का उपयोग करके अब काम नहीं करता है

@garrettmaring आप के साथ की कोशिश की थी .storybook/preview.js बजाय .storybook/config.js ?

@garrettmaring
अंत में मुझे .css का उपयोग करके import '!style-loader!css-loader!./main.css' .css फ़ाइलों के लिए काम करना पड़ा।
पहले तो मैंने वेबपैक कॉन्फिगरेशन के साथ रहने की कोशिश की, लेकिन मैंने अपने सभी कस्टम नियमों को हटा दिया, और इसे ऊपर की तरह झुका दिया। जाहिर है एनपीएम लोडर स्थापित करें।

@ शिल्मान हाँ, कि यह यह लेख स्पष्ट लगा।

@garrettmaring डॉक्स को बेहतर बनाने में मदद करने के लिए पीआर सबमिट करने का मन?

@garrettmaring
अंत में मुझे .css का उपयोग करके import '!style-loader!css-loader!./main.css' .css फ़ाइलों के लिए काम करना पड़ा।
पहले तो मैंने वेबपैक कॉन्फिगरेशन के साथ रहने की कोशिश की, लेकिन मैंने अपने सभी कस्टम नियमों को हटा दिया, और इसे ऊपर की तरह झुका दिया। जाहिर है एनपीएम लोडर स्थापित करें।

बस कुछ FYI करें जो मुझे पता चला, यह दृष्टिकोण स्थानीय रूप से स्टोरीबुक की सेवा करते समय अद्भुत काम करता है, लेकिन यह बिल्ड-स्टोरीबुक के साथ काम नहीं करता है (जो मैंने देखा था)।

मेरा समाधान
पूर्वावलोकन-head.html में <link rel="stylesheet" href="./your-global-styles.css" /> जोड़ें। फिर your-global-styles.css की निर्देशिका पर -s ध्वज का उपयोग करके शैलियों को स्टोरीबुक की निर्माण निर्देशिका में कॉपी करें। अब iframe.html "को" उसी निर्देशिका से your-global-styles.css संदर्भित होना चाहिए।

इसके साथ केवल एक समस्या है जब स्थानीय रूप से चल रहा है, ब्राउज़र कंसोल कहेगा कि यह localhost/your-global-styles.css नहीं मिल सकता है, लेकिन यह अभी भी उद्देश्य के रूप में काम करता है।

अगर किसी के पास इस से बेहतर तरीका है, या एक उचित समाधान के बारे में जानता है, तो मुझे बताएं :)

हम निम्नलिखित का उपयोग करके स्टोरीबुक में scss फाइलें परोसते हैं:

आयात '! शैली-लोडर! सीएसएस-लोडर! सस-लोडर !/। main.scss'

यह हमारे लिए ठीक काम करता है

@blemaire आप उस लाइन का उपयोग कहां कर रहे हैं?

@blemaire आप उस लाइन का उपयोग कहां कर रहे हैं?

@ लोपिस ने .storybook फ़ोल्डर में preview.js किया और उस लाइन को उसमें डाल दिया

सबको धन्यवाद। जिसकी पुष्टि की जा रही है

• .storybook (या जो भी जगह आप इसे रखना चाहते हैं) के लिए scss फ़ाइल जोड़ना।
• .storybook/preview.js बनाना
• import '!style-loader!css-loader!sass-loader!./styles.scss'; को preview.js dir में जोड़ना
• "css-loader" को package.json समर्पण के रूप में जोड़ा जा रहा है

हमारे लिए काम करता है; स्टोरीबुक ने एक कोणीय 9 पुस्तकालय ( angular.json फ़ाइल में जोड़ने के लिए कोई विकल्प नहीं) को आइकॉन बनाया

अगली बार में import "../styles/main.css"; (मुख्य ऐप में) के लिए .storybook/preview.js की import "../styles/main.css"; सरल है।

उपरोक्त समाधान कार्य करता है यदि आपकी सभी पाथिंग ../../src/main.scss लेकिन मेरी वर्तमान परियोजना SCSS ग्लोबल / अन्य का उपयोग करती है।

स्टोरीबुक के लिए मेरा main.js वेबपैक कॉन्‍फ़‍िगरेशन उर्फ ​​को संकलित कर सकता है। लेकिन जब मैं अपने preview.js में वैश्विक / उर्फ ​​SCSS आयात करने की कोशिश करता हूं तो यह पथों को हल नहीं कर सकता है।

नहीं पता कि कहाँ जाना है।

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

मैंने यह कोशिश की, लेकिन त्रुटि हो रही है। मुझे अपने वैश्विक सीएसएस चर और मिश्रणों के बारे में जानने के लिए स्टोरीबुक की आवश्यकता है।

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

अगली बार में import "../styles/main.css"; (मुख्य ऐप में) के लिए .storybook/preview.js की import "../styles/main.css"; सरल है।

क्या यह शैलियों / main.cs में आपके वैश्विक SCSS चर हैं? क्या वे स्टोरीबुक में बिल्कुल लागू होते हैं? मैंने यह कोशिश की, लेकिन अभी भी 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;
}

@ क्रोडर द्वारा प्रस्तावित समाधान एक कोणीय अनुप्रयोग से आपके घटकों के उपयोग के रूप में लंबे समय तक काम करता है लेकिन पुस्तकालयों के लिए, आप कोणीय में styles संपत्ति नहीं जोड़ सकते हैं। फ़ाइल फ़ाइल

क्या वह सभी के लिए काम कर रहा है? मेरे पक्ष में काम नहीं कर रहा :(

नहीं। मेरी मदद भी नहीं करता है। मुझे अब यह त्रुटि मिली:

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

बग का वर्णन करें
मैं सभी स्टोरीबुक इफ्रेम्स के लिए एक बार वैश्विक शैलियों (scss) को शामिल करने के कई तरीके आजमा रहा हूं और असफल रहा हूं। ऐसा करने के लिए एक स्पष्ट संक्षिप्त तरीका प्रतीत नहीं होता है।

प्रजनन करना
प्रयास:

1. 
   
   • प्रत्येक घटक के भीतर वैश्विक शैलियों को आयात करें।
   
   
   • परिणाम: शैलियाँ लागू की जाती हैं, लेकिन, कई global.scs शैलियाँ {कहानी #} x बार दोहराई जाती हैं।
   
   
2. 
   
   • कस्टम वेबपैक कॉन्फिगर के लिए यहां दिए गए निर्देशों का पालन करें: https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • परिणाम: ऐसा प्रतीत होता है कि यह केवल स्टोरीबुक को स्कैस पढ़ने के लिए कहता है, वास्तव में एक वैश्विक फ़ाइल सेट नहीं करता है जो सभी कहानियों पर लागू होती है
   
   
3. 
   
   • एक जगह स्टोरीबुक के लिए एक डेकोरेटर बनाने की सलाह देते हैं और उस तरह से "वैश्विक" सीएसएस लागू करते हैं।
   
   
   • परिणाम: मैं जो करने की कोशिश कर रहा हूं उसके लिए काम नहीं करेगा (कई शैलियों, मिश्रण, चर, आदि) यह केवल छोटे सीएसएस परिवर्तनों के लिए काम करता है
   
   
4. 
   
   • के तहत विन्यास में .storybook की आवश्यकता होती है ('../ libs / storybook / global-styles.scss'); लोडस्टोरीज फंक्शन के भीतर
   
   
   • परिणाम: कुछ भी नहीं
   
   
5. 
   
   • Storybook index.ts के भीतर वैश्विक शैलियों का आयात करने की कोशिश की
   
   
   • परिणाम: कुछ भी नहीं
   
   

6. • Angular.json फ़ाइल के माध्यम से वैश्विक शैलियों को जोड़ने की कोशिश की

     • परिणाम: कुछ भी नहीं

अपेक्षित् व्यवहार
मैं एक जगह पर ग्लोबल (scss) फाइलों को आयात करने में सक्षम होने की उम्मीद करूंगा ताकि हर स्टोरी के इफ्रेम पर लागू किया जा सके। वहाँ एक विन्यास सेटिंग मैं के बारे में पता नहीं हो सकता है?

प्रणाली:

• OS: MacOS
• डिवाइस: मैकबुक प्रो 2015
• ब्राउज़र: क्रोम
• फ्रेमवर्क: कोणीय
• Addons: - [addon-centered, addon-viewport, addon-info]
• संस्करण: [^ 5.0.1]

अतिरिक्त संदर्भ
मुझे उम्मीद है कि मैं स्टोरीबुक के भीतर कुछ कॉन्फ़िगरेशन को याद कर रहा हूं जो इसे हल करने के लिए सरल बना देगा।

क्या आपको कभी इसका समाधान प्राप्त हुआ था? यदि हां, तो समाधान क्या था? धन्यवाद!

@caseytrombley समाधान आपके पूर्वावलोकन में import '!style-loader!css-loader!sass-loader!./styles.scss'; जोड़ना है।

क्रिएट रिएक्ट ऐप + स्टोरीबुक के लिए, मैंने अपने सीएसएस रीसेट को स्टोरीबुक पर लागू करने के लिए config.js के बाद जोड़ा।

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

किसी को भी एक समाधान के लिए काम कर रहे हैं- scss?

आप उस ब्लॉग को पढ़ सकते हैं जो मैंने लिखा था कि कस्टम वेबपैक कॉन्फिगरेशन के माध्यम से आपकी स्टोरीबुक के लिए SCSS स्थिरांक लागू करने के बारे में बात करता है।

दोष यह है कि मैंने वर्तमान कॉन्फिग बग https://github.com/storybookjs/storybook/issues/11052 और उस ब्लॉग के बारे में बताया है जिसे मैंने एक काम के रूप में लिखा था।

उम्मीद है की यह मदद करेगा!

उन इंस्टॉल्स के लिए, जिनमें main.js (यानी आपने CreateReactApp प्रोजेक्ट में npx -p @storybook/cli sb init भागे), बस सिबलिंग के रूप में preview.js जोड़ें, फिर ऐसा करें:

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

यदि यह शिकायत करता है कि उन लोडरों में से एक स्थापित नहीं है (वे होना चाहिए अगर यह एक सीआरए परियोजना है), बस उन्हें मैन्युअल रूप से स्थापित करें (यानी yarn add style-loader css-loader )।

थ्रेड को बंद करें ताकि लोग समाधान के लिए नीचे की ओर कूद सकें जब उत्थान / पदावनत समाधान विफल हो जाए?

@garrettmaring आप के साथ की कोशिश की थी .storybook/preview.js बजाय .storybook/config.js ?

जब मैं एक ही डायरेक्टरी के अंदर styles.css फ़ाइल बनाता हूं और import './styles.css'; के साथ अपने preview.js फ़ाइल के अंदर आयात करता हूं, तो मेरी स्टोरीबुक अचानक लोडिंग स्थिति में फंस जाती है ... :(

किसी भी विचार कैसे हल करने के लिए?

मैं वेबकम्पर्स के लिए ओपन-डब्ल्यूसी कॉन्फिगर के साथ स्टोरीबुक का उपयोग करता .storybook फ़ोल्डर के अंदर preview.js और main.js फ़ाइल है।

@dcts जो हो सकता है क्योंकि आपका ./styles.css टेलविंड उपयोगिताओं को संदर्भित कर रहा है, कुछ सुविधाओं का उपयोग करके जिन्हें पूर्व-संसाधित करने की आवश्यकता है, या किसी अन्य तरीके से "टूटी हुई" एक स्टैंडअलोन फ़ाइल के रूप में।

मुझे तीन चीजें करने की जरूरत थी:

1. एक इनपुट सीएसएस फ़ाइल बनाएँ। मेरे लिए, यह css/tailwind.css जहां मैं अपने टेलविंड सेटअप के लिए आवश्यक कुछ भी आयात करता हूं।
2. स्टोरीबुक चलाते समय, पहले उस फाइल का निर्माण करें। मेरे लिए, यह एक PostCSS कमांड postcss css/tailwind.css -o css/index.css
3. .storybook/preview.js (यदि आवश्यक हो तो उस फ़ाइल को बनाएं) में import '../css/index.css

मैं ट्विन का उपयोग कर रहा हूं और मैं इस घटक का उपयोग उम्मीद के अनुसार कर सकता हूं:

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

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

मुझे लगता है कि पोस्टप्स स्टेप को संभालने के लिए स्टोरीबुक वेबपैक कॉन्फिगर को एडिट करने के लिए एक बेहतर समाधान होगा।

मैं scue के साथ Vue.js का उपयोग कर रहा हूं। मेरा मुद्दा यह है कि जब प्रीव्यू.जेएस में ग्लोबल एससीएस का आयात किया जाता है, तो मेरा क्रोम डिवोल्ट सुपर धीमा होता है और प्रयोग करने योग्य नहीं होता। किसी को भी एक ही मुद्दा रहा है? कोई विकल्प? मैं अपनी प्रत्येक कहानी में वैश्विक स्तर पर आयात नहीं करने की कोशिश कर रहा हूं।

उपरोक्त समाधानों ने एक तरह से काम किया, लेकिन यह तरीका __from official docs__ पूरी परियोजना में समस्या को दूर करता है।

संक्षेप में, हमें scss लोडर सेट करने के लिए Webpack कॉन्फ़िगरेशन का विस्तार करने की आवश्यकता है।

आधिकारिक डॉक्स से नमूना कोड

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

प्रयोग

अब आप .storybook/preview.js में ass के रूप में scss फ़ाइलें आयात कर सकते हैं:

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

मैं एक ऐसे मुद्दे पर भाग गया, जिसमें preview.js से एक बड़े पैमाने पर SCSS परियोजना का आयात किया जा रहा है, जिससे परियोजना में किसी भी परिवर्तन के लिए 5+ सेकंड की पुन: बिक्री हो रही है। किसी कहानी में इसे बाहर ले जाने से किसी भी चीज़ को वापस <1s recompile times पर मिल जाता है।

मैं स्टोरीबुक का उपयोग गैट्सबी और मानक एससीएस प्रीसेट के साथ कर रहा हूं। 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 का उपयोग button.scss साथ @use pathtomodule/global.scss शुरू करता हूं। मेरे मामले में यह preview.js अनावश्यक में आयात करता है।

एक और कैच था। @use वर्तमान में केवल 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>

इस तरह से मुझे हमेशा यकीन है कि मेरे मिश्रण और चर मौजूद हैं, लेकिन इस बात से अवगत रहें कि आपको अपने सभी घटकों और चर को सही ढंग से सार करने की आवश्यकता है। आप सर्वोत्तम प्रथाओं के लिए इनुकेट्स को देख सकते हैं।

उम्मीद है की यह मदद करेगा।

हाय @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;
}

@ क्रोडर द्वारा प्रस्तावित समाधान एक कोणीय अनुप्रयोग से आपके घटकों के उपयोग के रूप में लंबे समय तक काम करता है लेकिन पुस्तकालयों के लिए, आप कोणीय में styles संपत्ति नहीं जोड़ सकते हैं। फ़ाइल फ़ाइल

क्या वह सभी के लिए काम कर रहा है? मेरे पक्ष में काम नहीं कर रहा :(

मेरे लिए नहीं :( मैं नेक्स्ट.जेएस और रिएस्ट्रैप के साथ कोशिश की, लेकिन यह मेरे कंप्यूटर फ़ोल्डर से 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;
}

@ क्रोडर द्वारा प्रस्तावित समाधान एक कोणीय अनुप्रयोग से आपके घटकों के उपयोग के रूप में लंबे समय तक काम करता है लेकिन पुस्तकालयों के लिए, आप कोणीय में styles संपत्ति नहीं जोड़ सकते हैं। फ़ाइल फ़ाइल

क्या वह सभी के लिए काम कर रहा है? मेरे पक्ष में काम नहीं कर रहा :(

मेरे लिए नहीं :( मैं नेक्स्ट.जेएस और रिएस्ट्रैप के साथ कोशिश की, लेकिन यह मेरे कंप्यूटर फ़ोल्डर से app.scss को लोड नहीं कर पाया / -

@Hayatbiralem तरीका आज़माएं - यह काम करना चाहिए।

इसने मेरे लिए स्टोरीबुक @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;
  },
}