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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
js操作select控件的几种方法
Jun 02 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
webpack4 css打包压缩问题的解决
May 18 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
js获取图片的base64编码并压缩
Dec 05 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生成带有雪花背景的验证码
2008/09/28 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jQuery示例收集
2010/11/05 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
python开发之thread线程基础实例入门
2015/11/11 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
售后服务承诺书
2014/03/26 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
节水倡议书
2015/01/19 职场文书
工会工作个人总结
2015/03/03 职场文书
小学教师岗位职责
2015/04/02 职场文书