公司项目使用的是webpack1,使用extract-text-webpack-plugin 插件无法将css分离出来,检查原因,发现有如下代码

  1. <Route path="/home" component={require('react-router!./containers/home')}></Route>

经过react-router处理过的文件无法提取出样式,将代码修改为

  1. <Route path="/home" component={require('./containers/home')}></Route>

这时css被提取出来,但是报出如下错误

查阅资料,发现问题所在

因为 module.exports 和 ES6 里的 export default 有区别。

如果是用 es6 的写法,组件都是通过 export default 导出的,那么在 getComponent 方法里面需要加入 .default。

如果是用 CommonJS 的写法,也就是通过 module.exports 导出的,那就无须加 .default 了。

修改代码后,问题解决

  1. <Route path="/home" component={require('./containers/home').default}></Route>

webpack 样式分离之The root route must render a single element的更多相关文章

  1. Webpack实战(五):轻松读懂Webpack如何分离样式文件

    在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式 ...

  2. [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 ...

  3. Webpack 代码分离

    Webpack 代码分离 代码分离是 webpack 中最引人注目的特性之一. 你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件. 总的来说, webpack 分离可以分 ...

  4. webpack代码分离 ensure 看了还不懂,你打我(转)

    webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...

  5. webpack 样式模块打包深入学习

    1. style-loader css-loader sass-loader 分别的作用 style-loader: 将所有的样式嵌入到dom的style属性当中. css-loader: 将css当 ...

  6. webpack 样式表抽离成专门的单独文件并且设置版本号

    先以下的 css 的处理我们都把 mode 设置为 production. webpack4 开始使用: mini-css-extract-plugin插件, 1-3 的版本可以用: extract- ...

  7. web设计_8_数据表格内容样式分离

    1.页面需要用到table的时候,样式重置CSS要设置: table{ border-collapse: collapse; border-spacing:; } 2. HTML结构 <tabl ...

  8. webpack代码分离CommonsChunkPlugin插件的使用(防止重复)

    1.webpack.config.js中添加: const path = require('path'); + const webpack = require('webpack'); const HT ...

  9. IE兼容模式下样式分离错乱,求CSS高手

    IE正常模式下访问正常 兼容模式右边图片切换区域样式错乱,求CSS高手! 详细参考网址:www.javams.com

随机推荐

  1. about data type in c#

    int: identical with int 32, capacity, Type Capacity Int16 -- (-32,768 to +32,767) Int32 (same with i ...

  2. 自定义JavaScript字典类jsdictionary.js

    /* Dictionary类:本类实现了字典功能,所有方法.属性都模仿System..Collection.Generic.Dictionary类 构造函数: Dictionary() 属性: Com ...

  3. C#图解教程学习笔记——数据类型与数据存储

    一.数据类型1. 预定义类型C#提供16种预定义类型,包括13种简单类型和3种非简单类型:(1)简单类型<1>11种数值类型: 不同长度的有符号和无符号整数类型 浮点数的float和dou ...

  4. UVA 524 素数环 【dfs/回溯法】

    Description   A ring is composed of n (even number) circles as shown in diagram. Put natural numbers ...

  5. luogu P2043 质因子分解

    题目描述 对N!进行质因子分解. 输入输出格式 输入格式: 输入数据仅有一行包含一个正整数N,N<=10000. 输出格式: 输出数据包含若干行,每行两个正整数p,a,中间用一个空格隔开.表示N ...

  6. Synchronized 实现原理

    记得刚刚开始学习Java的时候,一遇到多线程情况就是synchronized.对于当时的我们来说,synchronized是如此的神奇且强大.我们赋予它一个名字"同步",也成为我们 ...

  7. sqld360

    https://mauro-pagano.com/2017/04/15/sql-monitoring-flamegraph-and-execution-plan-temperature-2-0/ ht ...

  8. Linux shell 提取文件名和目录名的一些方法(转)

    很多时候在使用Linux的shell时,我们都需要对文件名或目录名进行处理,通常的操作是由路径中提取出文件名,从路径中提取出目录名,提取文件后缀名等等.例如,从路径/dir1/dir2/file.tx ...

  9. vim批量缩进功能

    注释符号:" :set tabstop=4 设定tab宽度为4个字符 :set shiftwidth=4 设定自动缩进为4个字符 :set expandtab 用space替代tab的输入 ...

  10. matlab修改文件名和删除某类文件

    matlab修改多级文件夹路径下的文件名: % %%%%%%%%%%%%%%批量修改文件名一级文件夹 \路径下直接为文件 % close all;clear all;clc; % path='G:\1 ...