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

Question

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

angularwebpackwebpack-dev-serversass-loader

3

我的 SCSS 文件有所更改，虽然已经适当加载到页面中，但仍导致整个页面重新加载而不是 CSS 的 HMR（已更改样式表的热模块替换）。我该如何让 HMR 与 Angular2 协同工作？

适用的 webpack 配置（使用 postcss 实现 autoprefixer）：

{
  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' ],
})

- mikkelrd

好的，我已经让Angular团队的一些人知道了：https://github.com/angular/angular/issues/11942。我们将看看他们是否选择将其作为优先事项。 - mikkelrd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- whitetrefoil · Accepted Answer

面临同样的问题...

我想目前的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对此无用...... 我现在正在尝试使用{{link1：css-loader的CSS模块}}代替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>

在我看来，这个解决方案虽然可行，但非常复杂。但是在类似vue-loader这样的东西进入Ng2世界之前，我找不到更好的解决方案...

P.S.

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