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このローダーコンボベースは、コンパイルされたscssコードをインラインにangular2-template-loader変更styleUrlsして配置するだけなので、現在では不可能だと思います。styles

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

つまり、静的 CSS ではなく JS コードの一部です。Ng2 は実行時にこれらのコードをレンダリングします。これはまたExtractTextPlugin、それを使用しないことを意味します...

現在、Ng2 のダイナミック レンダリングの代わりにcss-loaderの CSS モジュールを使用して、スコープ付き 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の世界に来るようなものまで、より良い解決策を見つけることができません...

PS

私が心配しているのはts-loader/がどのように機能するかですawesome-typescript-loader。まだ確かではありませんが、cssファイルが変更された場合、tsファイルも変更されたと見なされてから再コンパイルされる必要があり、最終的に完全にリフレッシュされます...

于 2016-11-08T02:13:43.883 に答える