首先要安装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教程(四)——css的加载

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

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

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

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

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

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

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

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

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

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

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

  7. CSS远程加载字体

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

  8. css样式加载顺序

    css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...

  9. 用CSS实现加载的动画效果

    用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...

随机推荐

  1. [Apple开发者帐户帮助]六、配置应用服务(5.3)推送通知(APN):从您的Web服务器发送推送通知

    要使用APN从Web服务器向macOS用户发送推送通知,请注册网站推送标识符并创建网站推送证书. 对于每个网站,请注册一个网站推送标识符,用于验证通知是否来自您的服务器.然后创建一个网站推送证书以签署 ...

  2. [Swift通天遁地]四、网络和线程-(7)检测服务器接口的访问状态:验证请求结果和可访问性

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. Oracle group by分组拼接字符串

    select wm_concat(id),depon  from test_1  group by depon

  4. 如何获得Windows聚焦壁纸0726

    Windows聚焦壁纸缓存位置,绿色部分是你的用户名: (1)找到之后,一般是大于100K的 (2)将图片复制到另一个文件夹img,要用到路径 (3)在改文件夹下新建一个txt; txt文档里写:re ...

  5. 自学Python十二 战斗吧Scrapy!

    初窥Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 还是先推荐几个学习的教程:Scrapy 0.2 ...

  6. JVM中线程状态转换图

    JVM中线程的状态转换图 线程在一定条件下,状态会发生变化.线程一共有以下几种状态: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该 ...

  7. python--11、协程

    协程,又称微线程,纤程.英文名Coroutine. 子程序,或者称为函数,在所有语言中都是层级调用,比如A调用B,B在执行过程中又调用了C,C执行完毕返回,B执行完毕返回,最后是A执行完毕. 所以子程 ...

  8. JavaScript中的 函数splice() 的使用。

    大二接触JavaScript初期,学习函数中有一道题: 定义一个2个参数的函数.第1个参数是一个数组,第2个参数是需要删除的元素.函数功能,在第1个实参数组中查找第2个实参提供的值,找到则删除该元素( ...

  9. day02-操作系统、编程语言分类及python安装

    目录 操作系统 编程语言分类 安装python解释器 操作系统 操作系统有什么用 操作系统能接受外部指令转化成0和1,并把一些对硬件的复杂操作简化成一个个简单的接口,作为中间人连接硬件和软件 计算机三 ...

  10. 记录--git命令行上传项目到github仓库

    由于公司一直使用的是的SVN,基本上都是内网,原来的git命令都快忘记了,当然也是自己太懒,平时都是直接拖到github上.今天打开idea后突然看到了原来自己写好的一个项目,就想将它上传到githu ...