webpack 保存时css自动编译了,但是页面没有变化

使用的是extract-text-webpack-plugin,分离css,我现在是想修改css的时候页面能够自动编译并且刷新显示我修改了后的样式,经过查资料使用了css-hot-loader,但是还是没有效果,每次保存的时候也有自动编译css文件,但是就是没有变化。现在就是如果我修改了css,都要重新webpack一遍,才能看到变化。我的webpack中关于css的配置如下:

module: {
        loaders: [{
            test: /\.css$/,
            exclude: /node_modules/,
            use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader'
            }))
        }
    },
new ExtractTextPlugin('static/css/style.css'),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {
                discardComments: {
                    removeAll: true
                }
            },
            canPrint: true
        }),
阅读 4k
3 个回答

以下是我的配置,可以参考,我觉得应该是配置写错了

module 部分相关代码

module: {
    rules: [
      {
        test: /.styl$/,
        use: ExtractTextPlugin.extract({
          publicPath: '../',
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: [ autoprefixer ]
              }
            },
            'stylus-loader'
          ]
        })
      }
    ]
  }

plugins 部分相关代码

plugins: [
    new ExtractTextPlugin({
      filename: 'stylesheets/[sha512:contenthash:base64:8].css'
    })
  ]

没用webpack-dev-server

楼主没配置热更新吧,可以观阅下我刚上传到github的webpack简易教程,在搭建本地服务器那篇有讲到,要是觉得有用的话,别忘了给个star~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进