webpack react 单独打包 CSS

webpack react 单独打包 CSS

webpack react 单独打包 CSS

webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件

操作步骤:

step1:

安装 webpack plugin 插件

npm install extract-text-webpack-plugin --save

step2:

修改 webpack.config.js 配置

引用plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");

config的module 中:

{ test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader","less-loader") }, 

最后plugins添加

plugins: [ new ExtractTextPlugin("./css/[name][hash:8].css") ] 

问题

Q: Module build failed: ReferenceError: window is not defined.

A: 修改loader

错误示范: loader: ExtractTextPlugin.extract("style-loader!css-loader!less-loader")

正确示范: loader: ExtractTextPlugin.extract("style-loader", "css-loader","less-loader")

参考文章: 

1. https://webpack.github.io/docs/stylesheets.html

2. http://stackoverflow.com/questions/28223040/window-not-defined-error-when-using-extract-text-webpack-plugin-react

 

 

转载于:https://www.cnblogs.com/zhongxia/p/5443043.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/109048.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 自动化测试平台(八):列表组件公共化封装和用例项目管理功能开发

    自动化测试平台(八):列表组件公共化封装和用例项目管理功能开发上一章我们完成了整个用户管理模块的功能,能够正确的增、删、改、查用户。但其中有很多判断实际上是其他类似的模块也会有的,例如:1.创建用户后回到首页刷新列表;2.删除次页最后一条数据,回到前一页刷新列表;3.查询条件的格式化;—难道我们每写一个类似的模块,都要去写一遍这些重复的逻辑代码吗?显然是没必要的,所以我们需要将其抽离成公共列表组件提供给其他模块使用,避免大量的做重复的事情,并让代码更容易维护。本章还将完成用例项目管理功能,它主要用于管理不同类型(API、UI),不同项目

    2022年6月25日
  • 详谈利用系统漏洞及mysql提权

    详谈利用系统漏洞及mysql提权提权,顾名思义就是提升权限,当我们getshell⼀个⽹站之后,⼤部分情况下我们的权限是⾮常低的,这时就需要利⽤提权,让原本的低权限(如只允许列⽬录)→⾼权限(拥有修改⽂件的能⼒),权限提升后,对接下来的渗透有很⼤帮助

    2022年7月27日
  • Python 万能代码模版:爬虫代码篇「建议收藏」

    Python 万能代码模版:爬虫代码篇「建议收藏」你好,我是悦创。很多同学一听到Python或编程语言,可能条件反射就会觉得“很难”。但今天的Python课程是个例外,因为今天讲的**Python技能,不需要你懂计算机原理,也不需要你理解复杂的编程模式。**即使是非开发人员,只要替换链接、文件,就可以轻松完成。并且这些几个实用技巧,简直是Python日常帮手的最佳实践。比如:爬取文档,爬表格,爬学习资料;玩转图表,生成数据可视化;批量命名文件,实现自动化办公;批量搞图,加水印、调尺寸。接下来,我们就逐一用Python实

    2022年5月26日
  • ThinkPHP中数据库操作返回值总结[通俗易懂]

    转载自:ThinkPHP中数据库操作返回值总结关键字:  Thinkphp,返回值,数据库操作,select返回值,add返回值,setDec返回值Thinkphp中的Think\Model类提供了数据库的基本CURD(Create、Update、Read及Delete),通过该类可以很便捷的进行操作。Model类及扩展类主要的方法有:Create操作:create(

    2022年4月14日
  • 升降压电路的工作原理

    升降压电路的工作原理1.升压电路也叫自举电路,是利用自举升压二极管,自举升压电容等电子元件,使电容放电电压和电源电压叠加,从而使电压升高,有的电路升高的电压能达到数倍电源电压。开关直流升压电路(即所谓的boost或者step-up电路)原理,theboostconverter,或者叫step-upconverter,是一种开关直流升压电路,它可以是输出电压比输入电压高。基本电路图如图所示假定那个开关(三极管或者mos管)已经断开了很长时间,所有的元件都处于理想状态,电容电压等于输入电压。下面要分充电和放电两个部分来

    2022年6月20日
  • 我把ConcurrentHashMap & HashTable的知识点都整理了一下[通俗易懂]

    我把ConcurrentHashMap & HashTable的知识点都整理了一下[通俗易懂]都知道HashMap的知识点,你们知道ConcurrentHashMap&HashTable面试怎么问么?

    2022年6月24日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号