css hot loader,解决安装react-hot-loader后修改css/less文件不会热更新问题

webpack中启动了模块热替换，也是全网页刷新，不是局部更新！

这两天在研究react-hot-loader如何应用在react的项目中，之前webpack.dev.config.js配置中，设置了devServer: { hot: true, ... }，plugins: [ new Webpack.HotModuleReplacementPlugin(), ... ]，更改了js/jsx 文件都是全网页刷新，开始以为这就是热更新，且满足现状。而且修改了css/less文件后页面不会刷新，需要手动刷新样式才会生效，觉得不应该手动刷新但是也没去找原因为什么会这样【i 服了me】。

想提高开发效率，于是安装react-hot-loader，看了网上别人写的博客，以及官网后，需要配置webpack,我没做配置(其实配置了也管用，只是配置后我的eslint检验变的更严厉了)，直接在项目路由文件中使用：

import { hot, setConfig } from 'react-hot-loader'; const Routes = () => {} ; export default hot(module)(Routes);

为什么不在app.js 入口文件中使用呢？因为入口文件中使用了，在入口文件中使用react-hot-loader出现警告：You cannot change ;

再说一下，安装react-hot-loader后webpack以及.babelrc没做任何配置，直接在路由文件中使用了。且生效了。

但是，修改css/less 文件后，还是需要手动刷新页面样式才会生效，此时还是不知道啥原因。后来在网上看到这篇章才然大悟使用react-hot-loader的一些问题，原来是我的webpack配置在开发环境中抽离了css(一般在生产环境中进行抽离),于是进行了修改：

使用style-loader

修改的意思是将样式文件也打包到js中，然后，然后修改了css/less 文件的样式后页面元素局部刷新了。后来发现即使不添加react-hot-loader，将css/less打包进js后，修改样式文件页面也会热更新的。

对于上面遇到的问题，主要是自己学的浅，没深入研究问题导致的，不说了，继续学习吧！

css hot loader,解决安装react-hot-loader后修改css/less文件不会热更新问题相关推荐

彻底解决安装了显卡驱动后，Ubuntu开机无法进入图形化界面、黑屏、左上角光标闪烁问题
众所周知,Linux 系统的的 GUI 和 NVIDIA 显卡相处得并不是很愉快,驱动安装起来会出各种问题,非常折腾.很多同学在配备 NVIDIA 显卡的 Ubuntu 物理机上安装完显卡驱动后,重启 ...
0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）
文章目录 1. 重点提炼 2. 配置环境 3. Plugins(插件) 3.1 HtmlWebpackPlugin 3.1.1 example01 3.1.1.1 example01-1 3.1.1. ...
解决android 浏览器下载apk后提示 “无法打开文件”
感谢原作者的总结在项目中遇到安卓自带浏览器下载成功 , 但无法打开已下载的APK文件自动安装的问题,特别是三星系列的手机普遍存在这种问题,google后发现也有朋友遇到类似的问题: http://b ...
css表单发光,表单input选中后发光CSS怎么写
表单input选中后发光CSS代码如下input{ border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; padding-left ...
解决安装新版Qt Creator 后Kits无配置信息的问题
今天在Qt官网上面下载了新版的Qt Creator 4.15.2 (64bit)安装启动后,发现Kits里面的配置没有了.具体如下: 然后我启动原先的4.14.2版的Qt Creator 后发现原来的 ...
关于解决安装Ubuntu到移动硬盘后引导问题，不能在别人电脑上使用
先安装好进入系统在其他文章安装好ubuntu并且进入系统后 boot-repair 在进入的ubuntu系统使用引导修复 sudo add-apt-repository ppa:yannubuntu ...
ubuntu之解决安装python3.6.4后出现error while loading shared libraries: libpython3.6m.so.1.0的问题
1. 查找文件的位置: find / -name 'libpython3.6m.so.1.0' /usr/local/lib/libpython3.6m.so.1.0 2.在目录 /etc/ld.so ...
apk图标存放位置_安卓系统下安装完apk程序后，具体的文件夹位置在哪里呢？
展开全部有的程序的文件夹是自动建立在sd卡上的,有的程序是没有文件夹的,程序位于32313133353236313431303231363533e59b9ee7ad9431333365666238d ...
[转] React Hot Loader 3 beta 升级指南
前言在用 react-hot-loader v1.3 的时候有些深层组件不会很完美的热更新(可能是我使用有问题).然后在 react-hot-loader 首页中看到 React Hot Loade ...

css hot loader,解决安装react-hot-loader后修改css/less文件不会热更新问题

css hot loader,解决安装react-hot-loader后修改css/less文件不会热更新问题相关推荐

最新文章

热门文章