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 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
简单实现node.js图片上传
Dec 18 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 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代码
2013/11/19 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python struct.unpack
2008/09/06 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
python字符串,数值计算
2016/10/05 Python
超简单的Python HTTP服务
2019/07/22 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python数据抓取3种方法总结
2021/02/07 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
农民致富事迹材料
2014/01/23 职场文书
初一新生军训方案
2014/05/22 职场文书
预备党员转正考核材料
2014/06/03 职场文书
敬老月活动总结
2014/08/28 职场文书
毕业证委托书范文
2014/09/26 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
利用Python实现Picgo图床工具
2021/11/23 Python