如何将 HMR 与 SASS 和 ng2 样式加载一起使用？

Question

对我的 SCSS 文件的更改，虽然适当地加载到页面上，但会导致整个页面重新加载，而不是 css 的 HMR（更改的样式表的热模块替换）。如何让 HMR 与 Angular2 一起工作？

适用的 webpack 配置（autoprefixer 的 postcss）：

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

组件样式实现：

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

Answer 1

在这里遇到同样的问题...

我猜现在的angular2-template-loader 是不可能的，因为这个基于angular2-template-loader 的加载器组合只需将styleUrls 更改为styles 并将编译后的scss 代码内联：

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

所以它是 JS 代码而不是静态 CSS 的一部分。 Ng2 将在运行时渲染这些代码。这也意味着ExtractTextPlugin 没有用...

我现在尝试使用css-loader's CSS Module 代替 Ng2 的动态渲染来实现范围 CSS。我仍然对 TypeScript 有一些问题，但它应该可以工作。

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，此解决方案有效，但非常复杂。但是直到像 vue-loader 这样的东西来到 Ng2 世界之前，我找不到更好的解决方案......

附言

我担心的是ts-loader / awesome-typescript-loader 是如何工作的。虽然还不确定，但我猜如果有任何css文件被修改，ts文件require它也会被认为修改然后重新编译，最终导致完全刷新......