webpack 样式分离之The root route must render a single element
公司项目使用的是webpack1,使用extract-text-webpack-plugin 插件无法将css分离出来,检查原因,发现有如下代码
<Route path="/home" component={require('react-router!./containers/home')}></Route>
经过react-router
处理过的文件无法提取出样式,将代码修改为
<Route path="/home" component={require('./containers/home')}></Route>
这时css被提取出来,但是报出如下错误
查阅资料,发现问题所在
因为 module.exports 和 ES6 里的 export default 有区别。
如果是用 es6 的写法,组件都是通过 export default 导出的,那么在 getComponent 方法里面需要加入 .default。
如果是用 CommonJS 的写法,也就是通过 module.exports 导出的,那就无须加 .default 了。
修改代码后,问题解决
<Route path="/home" component={require('./containers/home').default}></Route>
webpack 样式分离之The root route must render a single element的更多相关文章
- Webpack实战(五):轻松读懂Webpack如何分离样式文件
在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式 ...
- [css]【转载】CSS样式分离之再分离
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...
- Webpack 代码分离
Webpack 代码分离 代码分离是 webpack 中最引人注目的特性之一. 你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件. 总的来说, webpack 分离可以分 ...
- webpack代码分离 ensure 看了还不懂,你打我(转)
webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...
- webpack 样式模块打包深入学习
1. style-loader css-loader sass-loader 分别的作用 style-loader: 将所有的样式嵌入到dom的style属性当中. css-loader: 将css当 ...
- webpack 样式表抽离成专门的单独文件并且设置版本号
先以下的 css 的处理我们都把 mode 设置为 production. webpack4 开始使用: mini-css-extract-plugin插件, 1-3 的版本可以用: extract- ...
- web设计_8_数据表格内容样式分离
1.页面需要用到table的时候,样式重置CSS要设置: table{ border-collapse: collapse; border-spacing:; } 2. HTML结构 <tabl ...
- webpack代码分离CommonsChunkPlugin插件的使用(防止重复)
1.webpack.config.js中添加: const path = require('path'); + const webpack = require('webpack'); const HT ...
- IE兼容模式下样式分离错乱,求CSS高手
IE正常模式下访问正常 兼容模式右边图片切换区域样式错乱,求CSS高手! 详细参考网址:www.javams.com
随机推荐
- 和菜鸟一起学android4.0.3源码之lcd屏幕背光调节
周六的中午还是依旧来了公司,本来也没有打算来的,既然来了,那就把上次遗留下来的一些问题给解决吧,把android下的pwm调lcd背光给总结下吧.关于android的背光,是用pwm波来控制的,通过占 ...
- 怎样录制简单GIF动图
看到视频里的精彩画面,想用动图的形式保存下来,应该如何录制呢,今天就介绍一款小巧实用,操作简单的软件,GifCam 2.0 汉化绿色版.相比其它的录制软件,它是免费无水印又可以在线录制的. 本来学习一 ...
- NieR:Automata中的一段文字
还没开始玩这个游戏,但在网易云音乐上听到一首歌,很好听 http://music.163.com/#/m/song?id=468490570 搜了一下相关视频,发现这首歌是在与一个叫做歌姬的boss战 ...
- Codeforces 158 B. Taxi[贪心/模拟/一辆车最多可以坐4人同一个群的小朋友必须坐同一辆车问最少需要多少辆车]
http://codeforces.com/problemset/problem/158/B B. Taxi time limit per test 3 seconds memory limit pe ...
- 如何证明一个数的数根(digital root)就是它对9的余数?
数根就是不断地求这个数的各位数之和,直到求到个位数为止.所以数根一定和该数模9同余,但是数根又是大于零小于10的,所以数根模9的余数就是它本身,也就是说该数模9之后余数就是数根. 证明: 假设有一个n ...
- SQL Server的WAITFOR DELAY注入
SQL Server的WAITFOR DELAY注入 WAITFOR是SQL Server中Transact-SQL提供的一个流程控制语句.它的作用就是等待特定时间,然后继续执行后续的语句.它包含 ...
- MariaDB半同步复制
1.主从复制原理 MySQL的二进制日志(binglog)会记录所有对数据库进行更改的操作,也就是说只要是会对数据库产生修改的操作都会被记录到二进制日志中去.记录二进制日志的主要目的有两方面:a.恢复 ...
- https://www.cnblogs.com/netoxi/p/7258895.html
https://www.cnblogs.com/netoxi/p/7258895.html 应用服务和数据服务分离 需求/解决问题 随着网站业务的发展,越来越多的用户访问导致性能越来越差,越来越多的数 ...
- 非常有用的开发工具之Android Studio插件
我们都知道Eclipse开发Android将在今年年底google不再继续提供相应的开发支持,转而开始强烈发展Android Studio,现在我就分享几款能帮助团队提升工作效率的几个Android ...
- OFV.msi是什么 为什么更新时无法安装
在网络上搜索了下 这个是Microsoft Office 文件验证加载项,微软提供了一个单独的文件:http://www.microsoft.com/downloads/zh-cn/confirmat ...