css hot loader,webpack hot module replacement: css without refresh

It is now possible to use angular2, webpack with hot module replacement, sass sourcemaps, and externally loaded css. It tooks me days of playing with it but I got it working!

The dependencies are style-loader, css-loader, and sass-loader (if using sass, if not, the sass loader can be removed)

I use ExtractTextPlugin for production mode to emit actual .css files.

NOTE: To get this to work, I don't use the stylesUrl property, instead I import the .scss file outside of the @Component decorator so that the styles load in the global context, rather than scoped by component.

This configuration allows for Hot Module replacement with SCSS files using webpack dev server, and extracttextplugin for production mode to emit actual .css files.

Here's my working 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

})

},

Then, in your component, for example, app.component.ts, you would require your app.style.scss file OUTSIDE of the @Component decorator.

That is the trick. This will not work if you load styles the "angular way" with stylesUrl. Doing it this way will allow you to lazy load .css stylesheets for components that are lazy loaded, making initial load time even faster.

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'

})

I have had no problems running this setup. Here you go!

Updated 08/2017: Improved config for webpack 3+ schema requirements, and to work with Angular 4 AOT compilation.