अब कोणीय 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'
})
मैं इस सेटअप चल रहा कोई समस्या नहीं पड़ा है। हेयर यू गो!
अपडेट किया गया 08/2017: webpack के लिए बेहतर config 3+ स्कीमा आवश्यकताओं, और कोणीय 4 AOT संकलन के साथ काम करने के लिए।
मैंने इस समस्या को ठीक करने के लिए https://github.com/sheerun/extracted-loader बनाया है – sheerun