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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
PHP控制网页过期时间的代码
2008/09/28 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
简单实现php上传文件功能
2017/09/21 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
详解django自定义中间件处理
2018/11/21 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python代码需要缩进吗
2020/07/01 Python
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
化学实验员岗位职责
2013/12/28 职场文书
初一科学教学反思
2014/01/27 职场文书
国庆宣传标语
2014/06/30 职场文书
统计工作个人总结
2015/03/03 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python