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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
学习Vue组件实例
Apr 28 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
jQuery实现验证用户登录
Dec 10 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
详解webpack的配置文件entry与output
2017/08/21 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
详解Python3的TFTP文件传输
2018/06/26 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
民族团结先进个人材料
2014/02/05 职场文书
会计学毕业生求职信
2014/06/25 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书