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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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的计数器程序
2006/10/09 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
jupyter安装小结
2016/03/13 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
《从现在开始》教学反思
2014/04/15 职场文书
销售助理岗位职责
2015/02/11 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
创业计划书之酒店
2019/08/30 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
JavaScript中reduce()的用法
2022/05/11 Javascript