编程 Javascript

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资源的实现

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

webpack 处理CSS资源的实现

- Author -

3santiago3

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 屏蔽鼠标键盘的几段代码

Jan 02 Javascript

如何判断元素是否为HTMLElement元素

Dec 06 Javascript

基于javascript、ajax、memcache和PHP实现的简易在线聊天室

Feb 03 Javascript

jQuery动态修改超链接地址的方法

Feb 13 Javascript

JavaScript中扩展Array contains方法实例

Aug 23 Javascript

js仿腾讯QQ的web登陆界面

Aug 19 Javascript

深入理解vue.js双向绑定的实现原理

Dec 05 Javascript

详细AngularJs4的图片剪裁组件的实例

Jul 12 Javascript

JS设计模式之状态模式概念与用法分析

Feb 05 Javascript

vue.js 实现图片本地预览裁剪压缩上传功能

Mar 01 Javascript

Bootstrap 按钮样式与使用代码详解

Dec 09 Javascript

Vue如何跨组件传递Slot的实现

Dec 14 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

php str_pad 函数使用详解

2009/01/13 PHP

PHP中对各种加密算法、Hash算法的速度测试对比代码

2014/07/08 PHP

PHP 中 Orientation 属性判断上传图片是否需要旋转

2015/10/16 PHP

php 数组随机取值的简单实例

2016/05/23 PHP

PHP 计算至少是其他数字两倍的最大数的实现代码

2020/05/26 PHP

各种效果的jquery ui(接口)介绍

2008/09/17 Javascript

javascript void(0)的妙用

2009/10/21 Javascript

JavaScript 获取当前时间戳的代码

2010/08/05 Javascript

js 操作select和option常用代码整理

2012/12/13 Javascript

javascript两种function的定义介绍及区别说明

2013/05/02 Javascript

JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

2013/12/14 Javascript

jquery实现公告翻滚效果

2015/02/27 Javascript

jQuery实现自定义checkbox和radio样式

2015/07/13 Javascript

理解javascript中的原型和原型链

2015/07/30 Javascript

js实现仿微博滚动显示信息的效果

2015/12/21 Javascript

vue的Virtual Dom实现snabbdom解密

2017/05/03 Javascript

微信小程序实现循环动画效果

2018/07/16 Javascript

微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

2019/08/16 Javascript

小程序如何写动态标签的实现方法

2020/02/05 Javascript

vue+render+jsx实现可编辑动态多级表头table的实例代码

2020/04/01 Javascript

python正常时间和unix时间戳相互转换的方法

2015/04/23 Python

Python实现单词翻译功能

2017/06/06 Python

Python坐标线性插值应用实现

2019/11/13 Python

学python最电脑配置有要求么

2020/07/05 Python

优纳科技软件测试面试题

2012/05/15 面试题

学员自我鉴定

2014/03/19 职场文书

以幸福为主题的活动方案

2014/08/22 职场文书

临时租车协议范本

2014/09/23 职场文书

考研复习计划

2015/01/19 职场文书

经营场所使用证明

2015/06/19 职场文书

名人传读书笔记

2015/06/26 职场文书

2016圣诞节贺卡寄语

2015/12/07 职场文书

学习师德师风的心得体会（2篇）

2019/10/08 职场文书

Python实战之实现康威生命游戏

2021/04/26 Python

Anaconda配置各版本Pytorch的实现

2021/08/07 Python

Redis中有序集合的内部实现方式的详细介绍

2022/03/16 Redis