Question

对我的SCSS文件进行适当加载到页面上的更改会导致整页重新加载而不是css的HMR（更换样式表的热模块替换）。如何让HMR与Angular2一起使用？

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

begin(completionHandler handler: (Int) -> Swift.Void)

组件样式实现：

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

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世界之前，我无法找到更好的解决方案......

P.S。

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

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

1 个答案:

home.component.ts：

home.component.html

P.S。