网页包热重新加载-CSS样式表不更新

这是我下面的快速设置

 if(process.env.NODE_ENV.trim()==='development'){

    app.use(webpackDevMiddleware(compiler, {
      publicPath: config.output.publicPath,
      stats: {colors: true}
    }))

    app.use(webpackHotMiddleware(compiler, {
      log: console.log
    })) 

  }

webpack.config

module.exports = {
  entry:[
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client?http://0.0.0.0:8080&reload=true',
    './client/index.js'
  ],
  output:{
    path:__dirname + '/public',
    publicPath: '/',
    filename: 'bundle.js'
  },
  module:{
    rules:[
      {
        test:/(\.js|\.jsx)$/,
        exclude: /(node_modules)/,

        use: [
          {
            loader: 'react-hot-loader'
          },
          {
            loader: 'babel-loader',
          }
        ]
      },
      { test: /\.json$/, loader: 'json-loader' },
      {
        test: /(\.css|\.scss)$/,
        loader: ExtractTextPlugin.extract({fallback: 'style-loader',loader: extract_loaders})
      },
      {
        test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader : 'file-loader'
      }
    ]
  },
  resolve:{
    extensions:['.js', '.jsx']
  },
  plugins:[
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}),
    new CopyWebpackPlugin([
      {from: 'client/images' ,to: 'public/images'}
    ]),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
  ],
}

当我更新我的jsx文件时，网站似乎在更新。但是当我更改css文件时，热更新不会发生

当css被更改时，webpack似乎可以正确编译。但由于某些原因，浏览器中看不到新的

style.css

文件

如果有什么帮助的话。。我正在从HTML文件导入style.css文件

更新：当我更改css文件时，我会在控制台中收到以下消息

[HMR] Checking for updates on the server...
[HMR] Nothing hot updated

---

当我更改

.jsx

时，这不会出现，因为您有babel和webpack，您可以在代码文件中导入css文件

例如：

import 'styles.css';

---

然后它将被捆绑，加载应该可以工作。

也许问题在于导入行？ 你试过没有反斜杠吗？（假设它在同一个目录中）

---

只是不要在开发网页包配置中使用ExtractTextPlugin，因为它会将您的样式提取到单独的文件中，所以HMR无法对其执行任何操作。快速修复：

       {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
            // use: ExtractTextPlugin.extract({
            //     fallback: "style-loader",
            //     use: "css-loader!sass-loader",
            // })
       }

---

很遗憾，我无法将此语句包含在客户端文件中，因为我正在呈现页面服务器端。这个require语句在服务器端编译时抛出了一个错误。嘿，看看这篇文章：你找到解决方案了吗@Kunkka？@Kevin-no:（…现在只是手动刷新而已）

       {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
            // use: ExtractTextPlugin.extract({
            //     fallback: "style-loader",
            //     use: "css-loader!sass-loader",
            // })
       }