2015-06-14 15 views
17

रीफ्रेश किए बिना सीएसएस अब तक मैं लाइवरेलोड का उपयोग कर रहा हूं ताकि जब भी मैं जेएस या टेम्पलेट्स बदलूं, पृष्ठ रीफ्रेश हो जाए, और जब मैं सीएसएस बदलता हूं, तो यह ताज़ा किए बिना नए सीएसएस को हॉटस्पेप करेगा।वेबपैक हॉट मॉड्यूल प्रतिस्थापन:

मैं अब वेबपैक को आजमा रहा हूं और एक ही अपवाद के साथ लगभग उसी व्यवहार में आया हूं: जब सीएसएस बदलता है, तो यह पूरी विंडो को रीफ्रेश करता है। क्या इसे रीफ्रेश किए बिना सीएसएस को हॉटस्पेप करना संभव है?

कॉन्फ़िग अब तक:

var webpackConfig = { 
    entry: ["webpack/hot/dev-server", __dirname + '/app/scripts/app.js'], 
    debug: true, 
    output: { 
     path: __dirname + '/app', 
     filename: 'scripts/build.js' 
    }, 
    devtool: 'source-map', 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new htmlWebpackPlugin({ 
      template: __dirname + '/app/index.html', 
      inject: 'body', 
      hash: true, 
      config: config 
     }), 
     new webpack.ProvidePlugin({ 
      'angular': 'angular' 
     }), 
     new ExtractTextPlugin("styles.css") 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: "style!css!sass?includePaths[]=" + __dirname + "/app/bower_components/compass-mixins/lib&includePaths[]=" + __dirname + '/instance/sth/styles&includePaths[]=' + __dirname + '/app/scripts' 
      } 
     ] 
    } 
}; 

उत्तर

16

यह ExtractTextPlugin का उपयोग कर के रूप में the project README में कहा गया है की कमियां में से एक है। आप अपनी कॉन्फ़िगरेशन को विभाजित करके समस्या को हल कर सकते हैं। अर्थात। इसके बिना विकास के लिए अलग-अलग विन्यास और इसके साथ उत्पादन के लिए एक है।

+1

मैंने इस समस्या को ठीक करने के लिए https://github.com/sheerun/extracted-loader बनाया है – sheerun

4

अब कोणीय 2, हॉट मॉड्यूल प्रतिस्थापन, एसएएस स्रोतमैप, और बाहरी रूप से लोड सीएसएस के साथ वेबपैक का उपयोग करना संभव है। मुझे इसके साथ खेलने का दिन लगता है लेकिन मुझे यह काम मिल गया!

निर्भरता style-loader, css-loader, और sass-loader (यदि सास का उपयोग कर, अगर नहीं, सास लोडर हटाया जा सकता है)

मैं उत्पादन मोड के लिए ExtractTextPlugin का उपयोग वास्तविक .css फ़ाइलों का उत्सर्जन कर रहे हैं।

नोट: इसे काम करने के लिए, मैं शैलियों यूआरएल प्रॉपर्टी का उपयोग नहीं करता, इसके बजाय मैं @ कॉम्पोनेंट सजावट के बाहर .scss फ़ाइल आयात करता हूं ताकि शैलियों द्वारा स्कॉप्ड किए जाने के बजाय शैलियों को वैश्विक संदर्भ में लोड किया जा सके।

यह कॉन्फ़िगरेशन वेबपैक dev सर्वर का उपयोग कर एससीएसएस फ़ाइलों के साथ हॉट मॉड्यूल प्रतिस्थापन और वास्तविक .css फ़ाइलों को निकालने के लिए उत्पादन मोड के लिए extracttextplugin की अनुमति देता है।

यहाँ अपने घटक में मेरे कार्य config

{ 
     test: /\.(scss)$/, 
     use: 
      isDevServer ? [ 
       { 
       loader: 'style-loader', 
       },    
       { 
       loader: 'css-loader', 
       options: { sourceMap: true } 
       }, 
       { 
       loader: 'postcss-loader', 
       options: { postcss: [AutoPrefixer(autoPrefixerOptions)], sourceMap: true } 
       }, 
       { 
       loader: 'sass-loader', 
       options: { sourceMap: true } 
       }, 
       { 
       loader: 'sass-resources-loader', 
       options: { 
        resources: [ 
        './src/assets/styles/variables.scss', 
        './src/assets/styles/mixins.scss'] 
       } 
       }, 
       /** 
       * The sass-vars-loader will convert the 'vars' property or any module.exports of 
       * a .JS or .JSON file into valid SASS and append to the beginning of each 
       * .scss file loaded. 
       * 
       * See: https://github.com/epegzz/sass-vars-loader 
       */ 
       { 
       loader: '@epegzz/sass-vars-loader?', 
       options: querystring.stringify({ 
        vars: JSON.stringify({ 
        susyIsDevServer: susyIsDevServer 
        }) 
       }) 
       }] : // dev mode 
      ExtractTextPlugin.extract({ 
      fallback: "css-loader", 
      use: [ 
       { 
       loader: 'css-loader', 
       options: { sourceMap: true } 
       }, 
       { 
       loader: 'postcss-loader', 
       options: { postcss: [AutoPrefixer(autoPrefixerOptions)], sourceMap: true } 
       }, 
       { 
       loader: 'sass-loader', 
       options: { sourceMap: true } 
       }, 
       { 
       loader: 'sass-resources-loader', 
       options: { 
        resources: [ 
        './src/assets/styles/variables.scss', 
        './src/assets/styles/mixins.scss'] 
       } 
       }, { 
       loader: '@epegzz/sass-vars-loader?', 
       options: querystring.stringify({ 
        vars: JSON.stringify({ 
        susyIsDevServer: susyIsDevServer 
        }) 
        // // Or use 'files" object to specify vars in an external .js or .json file 
        // files: [ 
        // path.resolve(helpers.paths.appRoot + '/assets/styles/sass-js-variables.js') 
        // ], 
       }) 
       }], 
      publicPath: '/' // 'string' override the publicPath setting for this loader 
      }) 
     }, 

है फिर, उदाहरण के लिए, app.component.ts के लिए, आप @Component डेकोरेटर के अपने app.style.scss फ़ाइल बाहर की आवश्यकता होगी।

यह चाल है। यदि आप stylesUrl के साथ "कोणीय तरीके" शैली को लोड करते हैं तो यह काम नहीं करेगा। इस तरह से करने से आप आलसी लोड किए गए घटकों के लिए .css स्टाइलशीट लोड कर सकते हैं, प्रारंभिक लोड समय को और भी तेज बनाते हैं।

app.component.css

/* 
* THIS IS WHERE WE REQUIRE CSS/SCSS FILES THAT THIS COMPONENT NEEDS 
* 
* Function: To enable so-called "Lazy Loading" CSS/SCSS files "on demand" as the app views need them. 
* Do NOT add styles the "Angular2 Way" in the @Component decorator ("styles" and "styleUrls" properties) 
*/ 
    import './app.style.scss' 

/** 
* AppComponent Component 
* Top Level Component 
*/ 
@Component({ 
    selector: 'body', 
    encapsulation: ViewEncapsulation.None, 
    host: { '[class.authenticated]': 'appState.state.isAuthenticated' }, 
    templateUrl: './app.template.html' 
}) 

मैं इस सेटअप चल रहा कोई समस्या नहीं पड़ा है। हेयर यू गो!

sass_sourcemaps _hmr _wds

अपडेट किया गया 08/2017: webpack के लिए बेहतर config 3+ स्कीमा आवश्यकताओं, और कोणीय 4 AOT संकलन के साथ काम करने के लिए।

+0

आपके व्यापक उत्तर के लिए धन्यवाद। मुझे अभी तक इसे आजमाने की ज़रूरत है, जिसमें कुछ समय लग सकता है क्योंकि हमने थोड़ी देर के लिए वेबपैक प्रोजेक्ट पार्क किया था, लेकिन आपका जवाब वादा करता है! –

1

ExtractTextPlugin कहा गया है "नहीं गर्म मॉड्यूल रिप्लेसमेंट" अपने README section में, हालांकि मैं मैन्युअल BrowserSync एपीआई के माध्यम से सीएसएस फ़ाइलों को अपडेट करके यह तय की।

मैंने अपनी सीएसएस फ़ाइलों में किसी भी बदलाव को सुनने के लिए gaze का उपयोग किया, और फिर उन्हें अपडेट करने के लिए BrowserSync का उपयोग किया।

npm install gaze 

तुम भी आसानी से निम्न में से कुछ के साथ अपने निर्माण स्क्रिप्ट का संपादन करके ऐसा कर सकते हैं:

const { Gaze } = require('gaze'); 

    // Your own BrowserSync init 
    browserSync.init({ 
    ... 
    }, resolve); 

    // Create a watcher: 
    // You can watch/reload specific files according to your build/project structure 
    const gaze = new Gaze('**/*.css'); 
    gaze.on('all',() => bs.reload('*.css')); 

आशा है कि मदद करता है।

2

वास्तव में ऐसा करने का एक आसान तरीका है। मैं sass-loader का उपयोग निकालने-पाठ-प्लगइन के साथ कर रहा हूं जो सीएसएस फ़ाइलों का उत्पादन करता है।

आप क्या करने की जरूरत अपने सीएसएस करने के लिए आईडी जोड़ने शामिल

<link id="js-style" type="text/css" rel="stylesheet" href="/static/main.css"> 

अब, आप सुनिश्चित करने के लिए जब HMR आप वर्तमान संस्करण/टाइमस्टैम्प के साथ यूआरएल को अपडेट होता है की जरूरत है। आप इस तरह के रास्ते में यह कर सकते हैं:

import '../style/main.scss' 
if (module.hot) { 
    module.hot.accept('../style/main.scss',() => { 
    const baseStyle = window.document.getElementById('js-style') 
    baseStyle.setAttribute('href', '/static/main.css?v=' + new Date().valueOf) 
    }) 
} 

तो जब भी सीएसएस परिवर्तन, हम सीएसएस का यूआरएल ठीक कर देंगे यह फिर से लोड करने में शामिल हैं।

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