如何使用Webpack 2重新加载Sass？

Question

我正在设置一个使用Webpack2，webpack-dev-middleware和HMR进行开发的React应用程序。每当我对React组件进行更改时，都会按照预期在浏览器中进行更新。我遇到的问题是，当我修改我的.scss文件时，浏览器确实更新了而不是。而不是发生了什么，是在控制台它给了我下面的：

[HMR] bundle rebuilding 
client.js:207 [HMR] bundle rebuilt in 1567ms 
process-update.js:27 [HMR] Checking for updates on the server... 
process-update.js:98 [HMR] Nothing hot updated. 
process-update.js:107 [HMR] App is up to date. 

在此之后，当我刷新页面，我的风格变化出现。我不能完全肯定发生了什么或者该问题源于但想一些帮助和clarification.Below是我的设置：

Webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
var autoprefixer = require('autoprefixer'); 
var DashboardPlugin = require('webpack-dashboard/plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var argv = require('yargs').argv; 

const config = {}; 

// This configured production 
if (argv.p) { 
    config.entry = [ 
     './src/client/scripts/index', 
     './src/client/scripts/utils/index', 
     './src/client/styles/index.scss' 
    ] 
    config.plugins = [ 
     new DashboardPlugin(), 
     new ExtractTextPlugin({ 
     filename: 'bundle.css', 
     allChunks: true 
     }), 
    ] 
} 
else { 
    config.entry = [ 
    'react-hot-loader/patch', 
    'webpack-hot-middleware/client', 
    './src/client/scripts/index', 
    './src/client/scripts/utils/index', 
    './src/client/styles/index.scss' 
    ] 
    config.plugins = [ 
    new DashboardPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'bundle.css', 
     allChunks: true 
    }) 
    ] 
} 

module.exports = { 
    entry: config.entry, 
    output: { 
    path: path.join(__dirname, 'src', 'client', 'static'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    devtool: 'inline-source-map', 
    devServer: { 
    hot: true, 
    contentBase: path.resolve(__dirname, 'src', 'client', 'static'), 
    publicPath: (__dirname, 'src', 'client', 'static') 
    }, 
    plugins: config.plugins, 
    module: { 
    rules: [ 
     { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     include: path.join(__dirname, 'src'), 
     use: [ 
      { 
      loader: 'babel-loader', 
      query: { 
       presets: ['react', ['es2015', { 'modules': false }], 'stage-0'], 
       plugins: ['react-hot-loader/babel', 'react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     use: [ 
      { 
      loader: 'url-loader?limit=100000' 
      } 
     ], 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    } 
}; 

Server.js使用的WebPack-DEV-中间件

const router = Router(); 
const clientDir = resolve(`${__dirname}/../../client`); 

if (isDev()) { 
    const webpackDevMiddleware = require('webpack-dev-middleware') 
    const webpack = require('webpack') 
    const webpackConfig = require('../../../webpack.config') 
    const webpackHotMiddleware = require('webpack-hot-middleware') 

    const compiler = webpack(webpackConfig) 

    // This compiles our app using webpack 
    router.use(webpackDevMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    noInfo: true 
    })) 

    // This connects our app to HMR using the middleware 
    router.use(webpackHotMiddleware(compiler)) 
} 

router.use(express.static(clientDir)); 

export default router 

在客户端index.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import { AppContainer } from 'react-hot-loader' 
import App from './App' 

const root = document.querySelector('.root'); 

// Wraps our App in AppContainer 
const render = (Component) => { 
    ReactDOM.render(
    <AppContainer> 
     <Component/> 
    </AppContainer>, 
    root 
); 
}; 

// Renders our application 
render(App); 

// This checks if a component has been updated 
// It then accepts the changes and replaced the module. 
// It's only checking if JS has been changed... 
// @TODO - it only works for JS not CSS. 
// I think this is an issue with webpack not 
// recognizing bundle.css as a dependency? 
if (module.hot) { 
    module.hot.accept(); 
} 

Answer 1

您使用extract-text-webpack-plugin和的WebPack后重建webpack-dev-middleware认为没有什么变化的捆绑，因为它的内容已经以您的包中相应的模块代表CSS是空的。

您需要在开发中禁用extract-text-webpack-plugin才能获得HMR。您可以使用disable option，它将回退到style-loader，它将注入<style>标签。

new ExtractTextPlugin({ 
    filename: 'bundle.css', 
    allChunks: true, 
    disable: true 
}) 

而不必定义可使用环境变量，如NODE_ENV=production和插件使用插件的两个版本：

new ExtractTextPlugin({ 
    filename: 'bundle.css', 
    allChunks: true, 
    disable: process.env.NODE_ENV !== 'production' 
})