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 学习笔记 选择器之一
Jul 23 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 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
javascript 自动转到命名锚记
2009/01/10 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
python字符串连接的N种方式总结
2014/09/17 Python
python判断字符串是否纯数字的方法
2014/11/19 Python
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
党风廉政承诺书
2014/03/27 职场文书
合作意向书
2014/07/30 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
党员对照检查材料
2014/09/22 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2014年卫生工作总结
2014/11/27 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android