वेबपैक-डीवी-सर्वर में जेएस से पहले गर्म सीएसएस लोड कैसे सुनिश्चित करें?

मैं वेबपैक-देव-सर्वर का उपयोग कर रहा हूं ताकि सीएसएस सहित मेरी सभी संपत्तियों को गर्म लोड किया जा सके। वर्तमान में, हालांकि, मेरा सीएसएस जावास्क्रिप्ट के बाद लोड होता है जो मेरे अनुप्रयोगों को कुछ स्थानों पर जारी करता है जो मौजूदा लेआउट पर निर्भर करता है।वेबपैक-डीवी-सर्वर में जेएस से पहले गर्म सीएसएस लोड कैसे सुनिश्चित करें?

मैं कैसे सुनिश्चित कर सकता हूं कि जावास्क्रिप्ट जावास्क्रिप्ट निष्पादित होने से पहले लोड हो जाता है?

मुझे लगता है कि module से ऐसा करने का कोई तरीका होना चाहिए, शायद एक कॉलबैक जिसे मैं हुक कर सकता हूं? या शायद प्राथमिकता के लिए स्टाइल लोडर को कॉन्फ़िगर करके?

यह मेरा index.js है:

import './styles/main.scss'; 
import './scripts/main.js'; 

if (module.hot) { 
    module.hot.accept(); 
}

और यह मेरा शैलियों लोडर है:

{ 
     test: /\.(scss)$/, 
     loader: 'style!css?&sourceMap!postcss!resolve-url!sass?sourceMap' 
},

ऐसा ही एक सवाल इस शैली-लोडर में कहा गया है Github मुद्दा: https://github.com/webpack/style-loader/issues/121

स्रोत

2016-09-08 Elise Chant

वर्तमान में मुझे लगता है कि सबसे अच्छा दृष्टिकोण वास्तव में सैस का उपयोग नहीं कर सकता है। हालांकि यह सीधे इस मुद्दे को हल नहीं करता है। –

-2

आप extract-text-webpack-plugin का उपयोग कर सकते हैं।

{ 
    test: /\.(scss)$/, 
    loader: ExtractTextPlugin.extract('style!css?&sourceMap!postcss!resolve-url!sass?sourceMap') 
},

फिर अपने HTML में, इतना है कि यह जे एस से पहले लोड करता है <link rel="stylesheet" ... का उपयोग कर <head> में सीएसएस फ़ाइल लिंक।

एचएमआर ExtractTextPlugin के साथ संगत नहीं है, लेकिन कम से कम यह जेएस से पहले सीएसएस लोड बनाता है।

स्रोत

2016-11-03 10:44:20

ओपी ने विशेष रूप से यह सुनिश्चित करने के लिए पूछा कि _hot_ css जेएस से पहले लोड हो। अभी तक एक्स्ट्रेक्ट-टेक्स्ट-वेबपैक-प्लगइन का उपयोग करके "गर्म" भाग पूरी तरह से हटा दिया जाता है। –

ऐसा लगता है कि कोई ईवेंट, कॉलबैक या शैली को लोड करने का पता लगाने का कोई तरीका नहीं है। व्यर्थ में खोज की लंबे समय तक के बाद, मैं वास्तव में कुछ गंदा करना था:

function checkCSS() { 
    const repeat = requestAnimationFrame(checkCSS); 
    // CSS loaded? 
    if(getComputedStyle(document.body).boxSizing === 'border-box') { 
    routes.loadEvents() // Init JS 
    cancelAnimationFrame(repeat) // Cancel next frame 
    } 
} 
if (process.env.NODE_ENV !== 'production') { 
    checkCSS() 
} else { 
    $(document).ready(() => { 
    routes.loadEvents() 
    }) 
}

क्योंकि मैं अपने शैलियों में * { box-sizing: border-box; } है और है कि मैं कर रहा हूँ यकीन है कि देशी सीएसएस शैलियों इस तरह दिखना कभी नहीं नहीं होगा, मैं कर सकते हैं ~ 99% सुनिश्चित करें कि मेरा स्वयं का सीएसएस लोड हो गया है।

मुझे थोड़ा लिखना पड़ा। उम्मीद है कि हम एक बेहतर तरीका मिलेगा!

स्रोत

2017-10-13 13:10:21

वेबपैक-डीवी-सर्वर में जेएस से पहले गर्म सीएसएस लोड कैसे सुनिश्चित करें?

उत्तर

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