Webpack中css-loader和less-loader的使用教程


Posted in Javascript onApril 27, 2017

前言

在Webpack中,通过css-loader,可以实现在js文件中通过require的方式,来引入css。下面来看看详细的介绍吧。

一、css-loader

我们需要在js文件里,通过require的方式来引入css,我们来看具体的方法,首先需要安装css-loader,
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。

npm install css-loader,style-loader --save-dev

然后在main.js中:

require('./app.css');

在app.css中:

#test{
 background:red;
 width:100px;
 height:100px;
 color:blue;
}

在webpack.config.js增加:

module.exports = {
 entry: './main.js',
 output: {
 filename: 'bundle.js'
 },
 module: {
 loaders:[
  { test: /\.css$/, loader: 'style-loader!css-loader' },
 ]
 }
};

在html中引入:

<html>
 <head>
 <script type="text/javascript" src="bundle.js"></script>
 </head>
 <body>
 <div id="test">Hello World</div>
 </body>
</html>

效果为:

Webpack中css-loader和less-loader的使用教程

二、less-loader

同样的,如果我们需要在js中,require,.less文件,那么我们需要增加包less-loader和less包

npm install less,less-loader --save-dev

在webpack.config.js修改:

module: {
  loaders: [
   {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},

  ]
 }

在module的loaders中,增加了!less-loader。

如此便可以在js中,require .less文件。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 写类方式之三
Jul 05 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 #Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 #Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 #Javascript
Vue实现购物车功能
Apr 27 #Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 #Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 #Javascript
You might like
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
js实现掷骰子小游戏
2019/10/24 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python tkinter canvas 显示图片的示例
2019/06/13 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
python中str内置函数用法总结
2020/12/27 Python
linux面试题参考答案(5)
2016/11/05 面试题
临床医学大学生求职信
2013/09/28 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
党员承诺书内容
2014/03/26 职场文书
敬老模范事迹
2014/05/21 职场文书
品牌推广策划方案
2014/05/28 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
雷锋观后感
2015/06/10 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA