使用SCSS和WebPack的Angular 2 - 更改scss文件时完全重新加载

Question

全部！我正在从gulp转到Webpack，我有一些基本的怀疑......

在gulp中，当我更改我的scss文件时，它会重新编译并立即在浏览器上显示更改。

使用webpack，如果我更改了scss文件，则不会在不重新加载浏览器的情况下应用更改。有人可以帮我吗？

这是一个非常好的世界应用....

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent { }

app.component.scss

main {
 padding: 1em;
 font-family: Arial, Helvetica, sans-serif;
 text-align: center;
 margin-top: 50px;
 color: red;
 display: block;
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent { }

webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
},

resolve: {
    extensions: ['', '.ts', '.js']
},

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            loaders: ['raw-loader', 'sass-loader']
        },
        {
            test: /\.css$/,
            exclude: helpers.root('src', 'app'),
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
        },
        {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loader: 'raw'
        }
    ]
},

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
        template: 'src/index.html'
    })
]
};