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实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 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提取字符串中网站url地址的方法
2014/12/03 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
基于python实现计算两组数据P值
2020/07/10 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
采购员岗位职责
2013/11/15 职场文书
职工代表大会主持词
2014/04/01 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
goland 清除所有的默认设置操作
2021/04/28 Golang
Javascript设计模式之原型模式详细
2021/10/05 Javascript