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操作cookie_获取与修改代码
May 21 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
js编写简单的计时器功能
Jul 15 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
微信小程序 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP经典面试题集锦
2015/03/19 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python Json序列化与反序列化的示例
2018/01/31 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
serialVersionUID具有什么样的特征
2014/02/20 面试题
信息管理员岗位职责
2013/12/01 职场文书
应付会计岗位职责
2013/12/12 职场文书
和平主题的演讲稿
2014/01/12 职场文书
品牌服务方案
2014/06/03 职场文书
小学数学教研活动总结
2014/07/01 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
docker-compose部署Yapi的方法
2022/04/08 Servers