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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 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
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
python继承和抽象类的实现方法
2015/01/14 Python
python正则表达式的使用
2017/06/12 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python requests接口测试实现代码
2020/09/08 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
综合实践活动方案
2014/02/14 职场文书
班级旅游计划书
2014/05/03 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书