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事件与函数的使用介绍
Sep 29 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
js打造数组转json函数
Jan 14 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
js数据类型检测总结
Aug 05 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
工程业务员岗位职责
2013/12/31 职场文书
初中地理教学反思
2014/01/11 职场文书
个人作风剖析材料
2014/02/02 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
杭白菊导游词
2015/02/10 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
如何利用python实现Simhash算法
2022/06/28 Python
python如何将mat文件转为png
2022/07/15 Python