1
Web Packは、ページを更新するときにスタイルの変更が有効になるため、モジュールの変更と再構築を正しく監視しています。しかし、爽やかでなくても、メッセージには単にApp hot update.と書かれていますが、スタイルは変わりません。Webpack 3でSASS/CSS Hot Reloadが動作しない
ここは私の設定です。 SASSを使用しており、プロダクションビルドにはExtractTextPluginのみを使用していることに注意してください。それは、それはそれをそれを得ることができない場合something.hot-reload.json
をロードしようとするため（簡単にするため、私は私達の生産の設定を編集した）
module.exports = function(env: {production:boolean}) {
return {
context: __dirname, // to automatically find tsconfig.json
resolve: {
alias: {
moment: 'moment/moment.js',
},
extensions: ['.scss', '.ts', '.js']
},
plugins: [
new webpack.ContextReplacementPlugin(
/@angular/,
path.resolve(__dirname, '../src')
),
new CopyWebpackPlugin([
{ from: 'src/static' }
]),
new webpack.HotModuleReplacementPlugin({
multiStep: true
}),
new HappyPack({
id: 'ts',
threads: 2,
loaders: [
{
path: 'ts-loader',
query: { happyPackMode: true }
}
]
}),
new ForkTsCheckerWebpackPlugin()
]
entry: ['./src/app/main.ts'],
output: {
path: path.resolve(__dirname + "/public/"),
filename: "bundle.js"
},
devtool: 'source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: false,
progress: true,
port: 3000,
contentBase: 'public',
proxy: {
'*': {
target: 'http://localhost:9657/',
secure: false
}
}
},
module: {
rules: [
{
test: /\.svg/,
loader: 'svg-url-loader',
options: {}
},
{
test: /\.json$/,
use: 'json-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'ts-loader'
},
test: /\.scss$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader?sourceMap!sass-loader?sourceMap&sourceComments'
}
]
}
}