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 特性检测并非浏览器检测
Jan 15 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php define的第二个参数使用方法
2013/11/04 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
基于Python List的赋值方法
2018/06/23 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
护理不良事件检讨书
2014/02/06 职场文书
小学五年级学生评语
2014/04/22 职场文书
北京奥运会口号
2014/06/21 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
2014年终个人工作总结
2014/11/07 职场文书
Python实现打乒乓小游戏
2021/09/25 Python