3

对我的 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' ],
})
4

1 回答 1

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 文件要求它也会认为已修改然后重新编译，最终导致完全刷新......

于 2016-11-08T02:13:43.883 回答