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要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...
随机推荐
- poj 2299 Ultra-QuickSort 题解
Description In this problem, you have to analyze a particular sorting algorithm. The algorithm proce ...
- Data Volume 之 bind mount - 每天5分钟玩转 Docker 容器技术(39)
storage driver 和 data volume 是容器存放数据的两种方式,上一节我们学习了 storage driver,本节开始讨论 Data Volume. Data Volume 本质 ...
- 【Python3之pymysql模块】
一.什么是 PyMySQL? PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中则使用mysqldb. PyMySQL 遵循 Python 数据库 ...
- [CF337D]邪恶古籍-树状dp
Problem 邪恶古籍 题目大意 给出一些关键点,求这棵树上到最远关键点距离小于等于d的有多少个. Solution 一个非常简单的树形dp.然而我被这道题给玩坏了. 在经过分析以后,我们发现只需要 ...
- java开发必读 书单
希望读的书单 重构 改善既有代码的设计 设计模式 可复用面向对象软件的基础 高性能MySQL第3版 Effective Java第1版 Effective Java第2版 Java核心技术I-基础知识 ...
- jmeter-Java-MongoDB 数据库增删改查操作
在日常测试过程中会发现有些测试数据是通过数据库来获取的,一般常用的数据比如SQL .Oracle,此类数据库jmeter有专门的插件进行使用JDBC,今天跟大家说一说关于Mongodb这个数据库jme ...
- CSS 样式书写规范+特殊符号
虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...
- java 一款可以与ssm框架完美整合的web报表控件
硕正套件运行于客户端(浏览器),与应用服务器(Application Server)技术无关,所以能完全用于J2EE. ASP.Net.php等技术开发的Web应用产品中. 硕正套件部署于服务器,支持 ...
- django MVC模式 数据库的操作mysql
介绍:本节课我们继续学习djangoWEB框架的开发,这节课主要是学习如何访问数据库,django如何自动为我们创建好表结构等相关内容. 1.首先我们打开settings.py找到DATABASES关 ...
- [C++ Calculator 项目] 基础运算实现
Calculator V1.1 注:这是C++计算器项目第二部分-运算 [基于初始部分增改而得] 源文件已上传至github 主要问题: Ⅰ.运算实现的问题在于( ) + - * /的优先级的处理,以 ...