首先要安装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 命令若看到

即为打包成功。

打开浏览器http://localhost:8080/

可以看到同样的类名都正常显示出来了,看下右边的文档结构,发现我们的类名不是class1了。

原来CSS Modules对我们的类名做了哈希处理,我们再也不用担心同事跟我们有相同的命名了。

是不是很方便呢?

让我们再来面对另一个问题,现在这种情况下css是js动态添加上去的,如果当js文件有一个长时间的阻塞事件,页面将会处于长时间的无样式的状态。

这是我们不希望看到的,怎么把css文件和js文件分离呢?

首先我们需要安装一个插件

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

安装成功之后在webpack.config.js中添加如下配置

完成之后运行一下npm run start

打开浏览器http://localhost:8080/

可以看到我们两个css文件合并为一个app.css文件并以外部样式表的形式加载。

而且css文件比js文件要先请求,这样就避免页面会出现FOUC-Flas Of Unstyle Content无样式内容闪烁。

webpack关于css的加载就讲到这里。

webpack教程(四)——css的加载的更多相关文章

  1. webpack教程(五)——图片的加载

    首先安装的依赖 npm install file-loader --save-devnpm install image-webpack-loader --save-devnpm install url ...

  2. webpack教程——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

  3. Js判断CSS文件加载完毕的实例教程

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...

  4. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  5. 如何判断css是否加载完成

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs functi ...

  6. 判断js和css是否加载完成

    在通过ajax或者src动态获取js.css文件的时候,我们常常需要判断文件是否加载完成,以便进行进一步的操作,但是在检测js.css文件是否已经加载的策略上各浏览器并不统一,有很多坑,现在在这里总结 ...

  7. css文件加载:@import和link的区别

    刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...

  8. CSS远程加载字体

    CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...

  9. Swift语法基础入门四(构造函数, 懒加载)

    Swift语法基础入门四(构造函数, 懒加载) 存储属性 具备存储功能, 和OC中普通属性一样 // Swfit要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...

随机推荐

  1. poj 2299 Ultra-QuickSort 题解

    Description In this problem, you have to analyze a particular sorting algorithm. The algorithm proce ...

  2. Data Volume 之 bind mount - 每天5分钟玩转 Docker 容器技术(39)

    storage driver 和 data volume 是容器存放数据的两种方式,上一节我们学习了 storage driver,本节开始讨论 Data Volume. Data Volume 本质 ...

  3. 【Python3之pymysql模块】

    一.什么是 PyMySQL? PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中则使用mysqldb. PyMySQL 遵循 Python 数据库 ...

  4. [CF337D]邪恶古籍-树状dp

    Problem 邪恶古籍 题目大意 给出一些关键点,求这棵树上到最远关键点距离小于等于d的有多少个. Solution 一个非常简单的树形dp.然而我被这道题给玩坏了. 在经过分析以后,我们发现只需要 ...

  5. java开发必读 书单

    希望读的书单 重构 改善既有代码的设计 设计模式 可复用面向对象软件的基础 高性能MySQL第3版 Effective Java第1版 Effective Java第2版 Java核心技术I-基础知识 ...

  6. jmeter-Java-MongoDB 数据库增删改查操作

    在日常测试过程中会发现有些测试数据是通过数据库来获取的,一般常用的数据比如SQL .Oracle,此类数据库jmeter有专门的插件进行使用JDBC,今天跟大家说一说关于Mongodb这个数据库jme ...

  7. CSS 样式书写规范+特殊符号

    虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...

  8. java 一款可以与ssm框架完美整合的web报表控件

    硕正套件运行于客户端(浏览器),与应用服务器(Application Server)技术无关,所以能完全用于J2EE. ASP.Net.php等技术开发的Web应用产品中. 硕正套件部署于服务器,支持 ...

  9. django MVC模式 数据库的操作mysql

    介绍:本节课我们继续学习djangoWEB框架的开发,这节课主要是学习如何访问数据库,django如何自动为我们创建好表结构等相关内容. 1.首先我们打开settings.py找到DATABASES关 ...

  10. [C++ Calculator 项目] 基础运算实现

    Calculator V1.1 注:这是C++计算器项目第二部分-运算 [基于初始部分增改而得] 源文件已上传至github 主要问题: Ⅰ.运算实现的问题在于( ) + - * /的优先级的处理,以 ...