webpack教程(四)——css的加载
首先要安装css的loader
npm install css-loader style-loader --save-dev
然后在webpack.config.js中配置如下代码
意思是先用css-loader加载css文件,再用style-loader添加在页面中
在app目录下创建component.css文件
body{
background-color: red;
}
在app/index.js中引入css文件
运行npm run start命令。
可以看到我们浏览器整个背景都变成了红色。
webpack做了什么呢?
看到build/app.js中有如下代码。
再看下我们生产的index.html文件
奇怪了,并没有内敛样式也没有引入的css文件,那浏览器是为什么变红的呢?
我们在浏览器中打开调试工具。
原来样式在这!
webpack动态的添加了内敛样式在代码中。
如果多人协作开发的情况下,会有很大可能出现代码命名重复的情况,如果出现这种情况怎么办呢?
来让我们试验一下。
在app目录下添加两个css文件,style1.css
body{
background-color: red;
}
.class1{
color: green;
}
和style2.css
body{
background-color: black;
}
.class1{
color: blue;
}
在index.js中引入这两个文件
修改component.js文件,使其给元素添加传入的类名
在webpack.config.js中添加如下配置
我们执行npm run start 命令若看到
即为打包成功。
可以看到同样的类名都正常显示出来了,看下右边的文档结构,发现我们的类名不是class1了。
原来CSS Modules对我们的类名做了哈希处理,我们再也不用担心同事跟我们有相同的命名了。
是不是很方便呢?
让我们再来面对另一个问题,现在这种情况下css是js动态添加上去的,如果当js文件有一个长时间的阻塞事件,页面将会处于长时间的无样式的状态。
这是我们不希望看到的,怎么把css文件和js文件分离呢?
首先我们需要安装一个插件
npm install extract-text-webpack-plugin --save-dev
安装成功之后在webpack.config.js中添加如下配置
完成之后运行一下npm run start
可以看到我们两个css文件合并为一个app.css文件并以外部样式表的形式加载。
而且css文件比js文件要先请求,这样就避免页面会出现FOUC-Flas Of Unstyle Content无样式内容闪烁。
webpack关于css的加载就讲到这里。
webpack教程(四)——css的加载的更多相关文章
- webpack教程(五)——图片的加载
首先安装的依赖 npm install file-loader --save-devnpm install image-webpack-loader --save-devnpm install url ...
- webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- 如何判断css是否加载完成
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs functi ...
- 判断js和css是否加载完成
在通过ajax或者src动态获取js.css文件的时候,我们常常需要判断文件是否加载完成,以便进行进一步的操作,但是在检测js.css文件是否已经加载的策略上各浏览器并不统一,有很多坑,现在在这里总结 ...
- css文件加载:@import和link的区别
刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...
- CSS远程加载字体
CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...
- Swift语法基础入门四(构造函数, 懒加载)
Swift语法基础入门四(构造函数, 懒加载) 存储属性 具备存储功能, 和OC中普通属性一样 // Swfit要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...
随机推荐
- vijos1051题解
题目: 圣诞老人回到了北极圣诞区,已经快到12点了.也就是说极光表演要开始了.这里的极光不是极地特有的自然极光景象.而是圣诞老人主持的人造极光. 轰隆隆--烟花响起(来自中国的浏阳花炮之乡).接下来就 ...
- NodeJS中的http模块
利用http模块,nodejs可以开发服务器, 极大简化服务器的创建: var http = require("http"); //创建服务器 var server = http. ...
- int-整数+bool-布尔功能介绍
int #创建和转换 #a = 123#a = int(123)#转换 #Age = "22"#Age = int(22)#1.当前整数用二进制表示的最小位数 # age = 50 ...
- java 邮件发送工具类
首先需要下载mail.jar文件,我个人通常是使用maven中心库的那个: <dependency> <groupId>javax.mail</groupId> & ...
- React 实践项目 (三)
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...
- Java虚拟机:如何判定哪些对象可回收?
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 在堆内存中存放着Java程序中几乎所有的对象实例,堆内存的容量是有限的,Java虚拟机会对堆内存进行管理,回收已经"死去&quo ...
- 教你做一个单机版人事管理系统(Winform版)treeview与listview使用详情
------------------------------------------------------------------部门部分------------------------------ ...
- Python基础之常用模块(二)
一.sys模块 1.sys.exit() 退出程序,这是正常退出程序,与之前用的break不同的是,break只是退出循环,循环之后的代码还会正常运行 2.sys.argv 会返回一个列表,列表中的 ...
- log4j日志重定向
配置相应的类名或者包名,将日志重新定向到输入文件里 log4j.rootLogger=INFO,DEBUG,CONSOLE ##过滤日志 log4j.logger.[类名|包名]=INFO,[输出目的 ...
- InnoDB关键特性之change buffer
一.关于IOT:索引组织表 表在存储的时候按照主键排序进行存储,同时在主键上建立一棵树,这样就形成了一个索引组织表,一个表的存储方式以索引的方式来组织存储的. 所以,MySQL表一定要加上主键,通过主 ...