How to use HMR with SASS and ng2 style loading?

Question

Changes to my SCSS files, while appropriately loaded onto the page, result in a full page reload rather than HMR for the css (hot module replacement of the changed stylesheet). How can I get HMR to work with Angular2?

Applicable webpack config (postcss for autoprefixer):

{
  test: /\.ts$/,
  loaders: ['ts', 'angular2-template-loader']
},
{
  test: /\.s?css$/,
  loader: 'raw!postcss?sourceMap=inline!sass?sourceMap'
},

Component style implementation:

@Component({
  selector: 'home-route',
  templateUrl: 'home.component.html',
  styleUrls: [ './home.component.scss' ],
})

Answer 1

Facing the same problem here...

I guess with the current angular2-template-loader it's just not possible, because this loader combo base on angular2-template-loader simply change styleUrls to styles and put the compiled scss code inline:

@Component({
  selector: 'home-route',
  templateUrl: 'home.component.html',
  styles: [ '.home{color:red}' ],
})

So it's a part of JS code instead of static CSS. Ng2 will render these code in runtime. This also means ExtractTextPlugin has no use on that...

I'm now trying to use css-loader's CSS Module instead of Ng2's dynamic rendering to achieve scoped CSS. I'm still having some problems with TypeScript but it should work.

home.component.ts:

const klasses = require('./home.component.scss')

@Component({
  selector: 'home-route',
  templateUrl: 'home.component.html',
})
export class HomeComponent {
  klasses = klasses
}

home.component.html

<div [ngClass]="klasses.home"></div>

IMO, this solution works but is really complicated. But I can't found a better solution until something like vue-loader come to Ng2 world...

P.S.

What I'm worried about is how does ts-loader / awesome-typescript-loader work. Although not yet be sure, I guess if any css file was modified, the ts file require it will also deem modified then be recompiled, which finally cause a full refreshing...