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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
两个Javascript小tip资料
Nov 23 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
asm.js使用示例代码
Nov 28 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
react-native android状态栏的实现
Jun 15 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 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
中国收音机工业发展史
2021/03/02 无线电
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
vue实现计算器功能
2020/02/22 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python求pi的方法
2014/10/08 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python ldap实现登录实例代码
2016/09/30 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
教师档案管理制度
2014/01/23 职场文书
产品质量保证书
2014/04/29 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers