webpack 处理CSS资源的实现


Posted in Javascript onSeptember 27, 2019

1. 一个引入 CSS 资源的案例

// index.js
import './style.css'
/* style.css */
#root {
 height: 100px;
 width: 100px;
 border: 1px solid #ccc;
}

就这样打包的话,是会报错的,那么想要成功打包 CSS 资源,需要使用下面介绍的几个 loader。

2. style-loader

将 CSS 样式注入到 DOM 中。

2.1 结合 css-loader 使用

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   }
  ]
 }
}

打包后,dist 目录下生成一个 main.js,文件内容中包含了我们所写的 CSS 代码,打开浏览器查看,在 <head> 标签内插入了一个 <style> 标签,并且页面样式也是生效的:

webpack 处理CSS资源的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
js使用ajax读博客rss示例
May 06 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
Node.js插件安装图文教程
May 06 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
微信小程序wepy框架笔记小结
Aug 08 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 #Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 #Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 #Javascript
vue实现全匹配搜索列表内容
Sep 26 #Javascript
vue实现节点增删改功能
Sep 26 #Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 #Javascript
You might like
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
js自动生成对象的属性示例代码
2013/10/28 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python中apply函数的用法实例教程
2014/07/31 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
出纳员的岗位职责
2014/02/22 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
公务员考察材料范文
2014/12/23 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技