vue-cli初始化项目中使用less的方法


Posted in Javascript onAugust 09, 2018

什么是less?

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

引言

现在前端的vue框架越来越火,vue-cli作为vue项目的脚手架工具,是我们在开发中最最经常使用的。为了在vue项目中更好的管理我们的css文件,我们通常会引入less或者sass来帮助我们管理我们的css代码。那么,本文旨在记录如何在vue-cli初始化的项目中使用less来帮助我们更好的管理css代码。

下面话不多说了,来随着小编一起看看详细的介绍吧

方法如下:

首先,安装less,推荐使用淘宝镜像安装:

cnpm install less less-loader --save

然后,修改配置文件:打开build文件夹-->找到webpack.base.conf.js,输入配置代码:

module.exports = {
 ……
 module: {  
  rules: [
   ……
   //在rules数组的最后位置插入一项配置代码
   {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
   }  
  ]}

最后在你的style标签中添加lang="less",scoped表示私有作用域

<style scoped lang="less">
 /*
  * 这里面你就可以愉快地书写less代码了
  */
</style>

总结

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

Javascript 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 #Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 #Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 #Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 #Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 #Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 #Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php二维码生成
2015/10/19 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Vue 的 v-model用法实例
2020/11/23 Vue.js
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python中endswith()函数的基本使用
2015/04/07 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
运动会邀请函范文
2014/01/31 职场文书
元旦联欢会感言
2014/03/04 职场文书
最美护士演讲稿
2014/08/27 职场文书
涨价通知
2015/04/23 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js