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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 支持向量机与支持向量回归(support vector machine and support vector regression)

    支持向量机与支持向量回归(support vector machine and support vector regression)支持向量机和支持向量回归是目前机器学习领域用得较多的方法,不管是人脸识别,字符识别,行为识别,姿态识别等,都可以看到它们的影子。在我的工作中,经常用到支持向量机和支持向量回归,然而,作为基本的理论,却没有认真地去梳理和总结,导致有些知识点没有彻底的弄明白。这篇博客主要就是想梳理一遍支持向量机和支持向量回归的基础理论知识,一个是笔记,另一个是交流学习,便于大家共勉。凸集、凸函数、凸优化凸集:如果集合…

  • docker镜像操作_docker 本地镜像

    docker镜像操作_docker 本地镜像前言Docker的三大核心概念:镜像、容器、仓库。初学者对镜像和容器往往分不清楚,学过面向对象的应该知道类和实例,这跟面向对象里面的概念很相似我们可以把镜像看作类,把容器看作类实例化后的对象。|

  • Db4o数据库:快速入门「建议收藏」

    Db4o数据库:快速入门「建议收藏」偶遇Db4o,非常有感觉,就推荐给大家吧。它是一种开源对象数据库。百分之百的面对对象,操作数据库就像操作对象一样简单快速。它有Java和.Net两个版本,在其官网可下载安装包及源代码。以.Net版本为例,给大家介绍Db4o的使用。安装完成后,在omn文件夹下,有一个VisualStudio的插件(ObjectManagerEnterprise),利用它可以像其他数据库工具一样,可以快速访问对

  • java static关键字的作用是什么_java中的static关键字

    java static关键字的作用是什么_java中的static关键字一、static代表着什么在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,当然也可以修饰代码块。Java把内存分为栈内存和堆内存,其中栈内存用来存放一些基本类型的变量、数组和对象的引用,堆内存主要存放一些对象。在JVM加载一个类的时候,若该类存在static修饰的成员变量…

  • Linux&Docker&Mysql&GitWin常用命令

    Linux&Docker&Mysql&GitWin常用命令苦于有时候某个命令真的想不起,又得百度,干脆以后操作linux时,打开博文直接查询多爽。基于安装rabbitmq时,某个命令不会,写下的,后面再继续补充1.基本命令:删除文件:rm -rf + 名称查看当前路径: pwd复制文件:cp [ -r ] 源文件或目录 目标文件或目录复制多个文件:cp /home/usr/dir/{file1,file2,file3,file4} /home/usr/destination/显示解压文件的过程 tar -zxvf 文件名称 不显

  • Ubuntu更改镜像源两种方式

    Ubuntu更改镜像源两种方式所谓的镜像源:可以理解为提供下载软件的地方因为使用apt-get命令默认是从国外的服务器下载安装软件的,会导致下载安装速度很慢,所以需要更改成国内的镜像源服务器。一、可视化方式更改镜像源1.打开“软件和更新”设备Ubuntu将“软件和更新”从“设置”中独立出来了2.选择“Ubuntu软件/其它站点/选择最佳服务器”,自动选择最佳服务器,3.重新载入可用软件列表,完成更新二、手动修改镜像源如:将镜像源改成清华大学TUNA镜像源:https.

发表回复

您的电子邮箱地址不会被公开。

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