घटक से SCSS फ़ाइल की निर्देशिका में संदर्भ कैसे करें?

वर्तमान में

मैं निम्नलिखित निर्देशिका संरचना है:घटक से SCSS फ़ाइल की निर्देशिका में संदर्भ कैसे करें?

stylesheets 
..modules 
...._all.scss 
...._colors.scss 
..partials 
...._all.scss 
...._Home.scss 
..main.scss

और मेरे _Home.scss में मेरे पास है:

@import '../modules/all'; 

.headerStyle { 
    color: pink; 
    font-size: 15; 
    font-weight: 500; 
}

और मेरे main.scss में मैं स्टाइलशीट में सभी _all.scss आयात फ़ोल्डर की तरह:

@import 'modules/all' 
@import 'partials/all' 

html { font-family: 'Roboto', sans-serif; } 
body { 
    margin: 0; 
    background-color: orange 
}

और आखिर में मेरे घटक में, मैं स्टाइलशीट आयात करता हूं:

import '../../stylesheets/main.scss' 

... 

<div className="headerStyle">Header</div>

फिर भी, div _Home.scss में .headerStyle के साथ स्टाइल जा रहा है। मैंने main.scss पर निर्देशिका पथ की जांच की है और यह सही है, और मुझे कोई त्रुटि नहीं मिल रही है।

और निम्नलिखित वास्तव में लागू किया जा रहा है:

body { 
    margin: 0; 
    background-color: orange 
}

मैं गलत क्या कर रही हो सकता है? और क्या घटक के लिए हर बार इसे परिभाषित करने के बजाय स्टाइलशीट को घटक में आयात करने का एक बेहतर तरीका है?

अग्रिम धन्यवाद और जवाब को अपवित्र/स्वीकार करेगा।

स्रोत

2017-01-19 Jo Ko

आप 'partials/_all.scss' में' _Home.scss' आयात कर रहे हैं:

यहाँ अद्यतन कोड है? '@import 'होम' – inostia

सबसे पहले, क्या यह' @import 'मॉड्यूल/सब' में एक टाइपो है? क्या यह '_all' नहीं होना चाहिए? दूसरी बात, '_all.scss' फ़ाइलों की सामग्री क्या है? –

मैं सफलतापूर्वक निम्नलिखित की कोशिश की (सादे HTML और Scout-App का उपयोग कर सीएसएस के लिए एससीएसएस को बदलने के लिए):

संपादित करें: जैसा कि बताया जा रहा उपयोग नहीं किया है प्रतिक्रिया लेकिन इस पोस्ट hugogiraudel.com के आधार पर यह रूप में एक ही वाक्य रचना होना चाहिए मेरे समाधान में (अधिक या कम/पहली दृष्टि पर ;-))।

संपादित करें 2: मैंने बस कुछ दिन पहले एससीएसएस का उपयोग करना शुरू कर दिया था। जहां तक मैं आपकी एकमात्र त्रुटियों को बता सकता हूं, मेरे उदाहरण में दिखाए गए कुछ टाइपो हैं। चूंकि 'बॉडी' लागू होता है, मुझे लगता है कि आपके घटक में आयात कथन प्रतिक्रिया के लिए सही है।

यदि घटकों में आयात करने के लिए बेहतर समाधान है तो किसी और ने इसका उत्तर देना होगा। लेकिन ऐसा लगता है कि लिंक किए गए ब्लॉग पोस्ट के लेखक के पास एक और दृष्टिकोण है और एक गिथब रिपोजिटरी भी उपलब्ध है।

निर्देशिका संरचना:

- project_folder 
    - index.html 
    - stylesheets 
     - main.scss 
     - partials 
      - _all.scss 
      - _Home.scss

Index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <!-- NOTE: 'css_stylesheets' is the folder where the 
        Scout-App added the transformed CSS files --> 
     <link rel="stylesheet" href="css_stylesheets/main.css" type="text/css" /> 
    </head> 
    <body> 
     <!-- NOTE: I don't know anything about React but 
        in HTML the attribute is 'class' not 'className' 
        Edit 3: 'className' is correct, my bad --> 
     <div class="headerStyle">Header</div> 
    </body> 
</html>

स्टाइलशीट/main.scss

@import 'partials/all'; // Your missing here a semicolon (;) I think 

html { font-family: 'Roboto', sans-serif; } 
body { 
    margin: 0; 
    background-color: orange; // here too but wasn't crucial 
}

स्टाइलशीट/partials/_all.scss

@import '_Home.scss';

स्टाइलशीट/आंशिक/_ होम।एससीएसएस

.headerStyle { 
    color: pink; 
    font-size: 30px; // I added here pixels because Firefox ignored it otherwise 
    font-weight: 500; 
}

स्रोत

2017-02-01 00:27:37

असल में ' 'पर http://www.material-ui.com/#/components/table जैसे' 'पर कोशिश कर रहा था, लेकिन काम नहीं करता है। –

क्या वैसे भी आप प्रतिक्रिया के प्रस्तुत एचटीएमएल प्रदान कर सकते हैं? यदि आप की शैली सेट करने के लिए 'शैली' विशेषता का उपयोग करते हैं तो यह काम करता है? –

सामग्री-ui दस्तावेज़ों और इस पोस्ट के आधार पर [stackoverflow.com] (http://stackoverflow.com/questions/35053163/material-ui-table-how-to-make-style-changes-to-table-elements) इनलाइन शैलियों आपकी समस्या हो सकती है। लेकिन यह अभी मेरे लिए अनुमान लगा रहा है। यदि यह समस्या नहीं है तो किसी और अनुभवी को यहां लेना होगा ;-) –

आप ताकि आप

import 'main.scss'

बजाय

import '../../stylesheets/main.scss'

स्रोत

2017-02-01 08:48:02 fingerpich

यह कहता है कि मॉड्यूल 'main.scss' को हल नहीं किया जा सकता है –

@fingerpich अपने पथ सरल बनाने के लिए एक अच्छा समाधान पर हिट इस्तेमाल कर सकते हैं stylesheets निर्देशिका का उपयोग करने के लिए Webpack कॉन्फ़िगर किया है। config

Webpack:

{ 
    resolve: { 
    alias: { 
     // the path needs to resolve relative to the files where you're importing them 
     stylesheets: path.resolve(__dirname, '../stylesheets') 
    } 
    } 
}

डॉक्स: https://webpack.github.io/docs/configuration.html#resolve-alias

घटक फ़ाइल:

import 'stylesheets/main.scss'

आप हमेशा अपने स्टाइलशीट निर्देशिका के लिए एक उपनाम सेट कर सकते हैं, और फिर उस निर्देशिका के सापेक्ष आयात

इसके अलावा आप पथ के सामने ~ जोड़कर वेबपैक को अपने एसएएस फाइलों के अंदर से आयात को हल करने दे सकते हैं। तो फिर तुम सिर्फ अपने घटक फाइलों में है कि आपके आयात लिख सकते हैं और वे अपना उपनाम को हल करेंगे:

@import '~stylesheets/modules/_colors.scss'

डॉक्स: https://github.com/jtangelder/sass-loader#imports

स्रोत

2017-02-03 06:32:22 shadymoses

समग्र कोड में जो आप केवल एक बात याद आ रही है अर्ध प्रदान की है -कॉलन (;) एससीएसएस का उपयोग करते समय हमें कथन को समाप्त करने के लिए अर्ध-कॉलन का उपयोग करना होगा।

@import 'modules/all'; 
@import 'partials/all'; 

html { font-family: 'Roboto', sans-serif; } 
body { 
    margin: 0; 
    background-color: orange; 
}

स्रोत

2017-02-07 12:37:42

घटक से SCSS फ़ाइल की निर्देशिका में संदर्भ कैसे करें?

उत्तर

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