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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
js快速排序的实现代码
Dec 08 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
js实现上传并压缩图片效果
Jan 10 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 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” 彩蛋进行敏感信息获取
2013/08/07 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python内置函数delattr的具体用法
2017/11/23 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
办护照工作证明范本
2014/01/14 职场文书
初中校园广播稿
2014/02/02 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
给老婆的保证书范文
2014/04/28 职场文书
组工干部演讲稿
2014/09/02 职场文书
警用民用对讲机找不同
2022/02/18 无线电
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js