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源码学习javascript(三)
Dec 27 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
微信小程序 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP安全下载文件的方法
2016/04/07 PHP
JavaScript 参考教程
2006/12/29 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
requests和lxml实现爬虫的方法
2017/06/11 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python 实现Harris角点检测算法
2020/12/11 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
幼师求职自荐信范文
2014/01/26 职场文书
记帐员岗位责任制
2014/02/08 职场文书
优秀党员获奖感言
2014/02/18 职场文书
捐书活动总结
2014/05/04 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
避暑山庄导游词
2015/02/04 职场文书
会计求职自荐信范文
2015/03/04 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
python实现自动清理文件夹旧文件
2021/05/10 Python
centos8安装MongoDB的详细过程
2021/10/24 MongoDB