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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python zipfile_Python 学习入门(16)—— zipfile

    python zipfile_Python 学习入门(16)—— zipfilezipfile是python里用来做zip格式编码的压缩和解压缩的,由于是很常见的zip格式,所以这个模块使用频率也是比较高。zipfile里有两个非常重要的class,分别是ZipFile和ZipInfo,在绝大多数的情况下,只需要使用这两个class就可以。1)ZipFile是主要的类,用来创建和读取zip文件;2)ZipInfo是存储的zip文件的每个文件的信息的。1)简单应用如果你仅…

    2025年12月14日
    4
  • js 对象转数组 的方法「建议收藏」

    js 对象转数组 的方法「建议收藏」直接上代码:1、ES6以上写法:constobjToArr=(model)=>Object.keys(model).map(key=>({key:model[key]}));2、ES5写法:写法一:functionobjToArr(model){returnObject.keys(model).map(key=>({key:model[key]}));}写法二:(该方法相对初级,简单易理解)…

    2025年11月8日
    5
  • LaTeX的下载安装及简易使用

    LaTeX的下载安装及简易使用前言毕业论文中需要使用Ctex来写,但是之前完全没有接触过这个软件,所以就打算记录一下自己的学习过程。本来打算自己写一下相关的一些东西,但是发现大佬们已经写得特别棒了,就把一些大佬写得东西的链接写出来,希望能帮到有需要的小伙伴们。1.关于LaTeX和CTeXLaTeX是一种基于ΤΕΧ的排版系统,由美国计算机学家莱斯利·兰伯特(LeslieLamport)在20世纪8…

    2022年4月28日
    52
  • 好用的tracker服务器_tracker服务器地址

    好用的tracker服务器_tracker服务器地址BTTracker是一款小巧便捷的BT种子制作辅助小工具,功能强大,并且可以通过导入导出数据片段来批量添加项目,当然这里主要说的是Tracker服务器列表——announce-list,但是就批量增添Tracker来说还是不够方便。然后终于找到个专门针对Tracker的编辑工具,可以将下边的TorrentTracer列表写入TrackerEditor程序同目录下的add_trackers.tx…

    2022年10月1日
    3
  • pycharm2021专业版永久激活码【在线注册码/序列号/破解码】

    pycharm2021专业版永久激活码【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    83
  • Oracle修改字段类型Sql –ORA-01439

    Oracle修改字段类型Sql –ORA-01439有一个表名为tb,字段段名为name,数据类型nchar(20)。1、假设字段数据为空,则不管改为什么字段类型,可以直接执行:altertabletbmodify(namenvarchar2(40));2、假设字段有数据,则改为varchar2(40)执行时会弹出:“ORA-01439:要更改数据类型,则要修改的列必须为空”,这时要用下面方法来解决这个问题:–修改原字段…

    2022年5月26日
    81

发表回复

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

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