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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
微信小程序 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 木马攻击防御技巧
2009/06/13 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JS实现滑动插件
2020/01/15 Javascript
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
硕士生工作推荐信
2014/03/07 职场文书
竞聘自述材料
2014/08/25 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
golang内置函数len的小技巧
2021/07/25 Golang
python 远程执行命令的详细代码
2022/02/15 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技