关于Less在Vue中的使用方法介绍
更新时间：2023年10月20日 08:58:53 作者：qq_45736969
最近发现好多小伙伴在面试的过程中会问到vue如何使用less和scss，所以下面这篇文章主要给大家介绍了关于Less在Vue中的使用方法,需要的朋友可以参考下
前言：
先说我的问题。我们的vue项目整体颜色风格做了调整，甲方要求本次要将所有与颜色相关的当要单独提取出来，放在一个文件里，方便后期更好地维护。这时候我认为用less是个很好的选择，可以将所有的公用颜色自定义，在需要的页面通过变量的形式引用。接下来说方法。
1、首先需要安装less和less-loader依赖
注意less-loader的版本不要太高，不然可能无法使用，以下的安装命令指定了下载版本。可以先查看以下项目中的package.json文件。如果有less和less-load，以下这个命令可以省略。
npm install --save less@3.11.1 less-loader@5
2、安装 style-resources-loader和vue-cli-plugin-style-resources-loader用于全局配置less。
vue add style-resources-loader
在输入此命令后，会出现不同的预处理选择，选择less点击回车。以上两个步骤结束之后，你的package.json文件中会多出以下依赖：
并且，在vue.config.js文件中会增加以下配置：（红色框内是你存放less文件的路径)
3、下面我们来创建一个less。
可选择在assets目录下建一个css文件夹，专门用来存放less文件。并在里面自定义几个变量。
4、在main.js文件中全局引用这个less文件（注意你自己的less文件存放位置，路径不要写错）
5、哪里需要哪里使用
注意style标签一定要加上 lang='less'
总结
到此这篇关于Less在Vue中的使用方法介绍的文章就介绍到这了,更多相关Vue中使用Less内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue使用element-ui tabs切换echarts解决宽度100%方式
这篇文章主要介绍了vue使用element-ui tabs切换echarts解决宽度100%方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
这篇文章主要介绍了解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue3 全局使用按钮截流指令示例代码,Vue2与Vue3中的自定义指令实现方式略有不同，但实现的按钮截流功能是类似的，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
本文主要介绍了VUE3封装一个Hook的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了nuxtjs中如何对axios二次封装问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Element--el-tabs固定在顶部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Vue使得大屏自适应的多种方法,自适屏幕，始终保持16:9的比例，还一种是使用CSS scale属性对大屏幕做自适应处理，需要的朋友可以参考下2023-10-10
这篇文章主要介绍了通过命令创建vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论