vue中使用less变量,vue引入less文件
前段时间一直在学习vue，开始记录自己遇到的问题。下面这篇文章主要介绍在vue项目中使用less的一些小技巧。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
前言
第一，风格渗透
1.什么是风格渗透？2.怎么用？
第二，融入
1.什么是混合？
2.怎么用？第三，自动导入较少
1.自动导入的优势
2.如何实现？摘要
前言
我们能看到的漂亮网页都是UI精心设计，前端攻城狮打造的。如果你想有很酷的风格，你需要使用css来处理它们。他们中的许多人会有许多重复和冗余的代码。这时候less、sass、scss之类的样式预处理程序就出现了，大大简化了css代码，提高了开发效率。今天我们就来看看在vue项目中少用语法是如何渗透效果，融入进去的~
一、样式穿透
vue项目中的结构由三部分组成：模板、脚本和样式。样式中的lang属性决定了样式中的语法，设置scoped属性可以防止当前页面的样式污染其他页面。
1. 什么是样式穿透？
设置您自己的样式以覆盖原始样式。
2. 如何使用？
当我们使用打包的公共组件时，我们对组件提供的原始样式不满意，想要调整样式。我们不能修改通用组件中的样式，所以需要使用样式穿透来帮助我们解决这个问题。
vue2中写法
代码如下(示例):
style lang=less 范围
/deep/a {
文字-装饰：无；
}
/风格
style lang=less 范围
* v-deep a {
文字-装饰：无；
}
/风格
用vue3写的
style lang=less 范围
:deep(a) {
文字-装饰：无；
}
/风格
二、混入
1. 什么是混入？
类似于js中的函数，提取样式中的重复代码，使用时可以多次引入。
2. 如何使用？
定义
代码如下(示例):
style lang=less 范围。abc() {
颜色：天蓝色
}
/风格
使用
style lang=less 范围
p {
字体大小：20px。ABC()；
}
/风格
三、 less自动化导入
1. 自动化导入好处
可以把经常出现的样式文件抽出来放在less文件里。
然后直接用在需要用的地方，不用手动导入文件。
2. 如何实现？
使用vue-cli的style-resources-loader插件完成对每个vue组件的style标签的自动注入。
在终端的项目根目录下运行vue add style-resources-loader，添加一个vue-cli插件。
注意：终端窗口会弹出一个查询，只需写y，少选。
安装完成后，会自动生成vue.config.js文件。只需在配置中添加需要自动导入的less文件的地址即可。
代码如下(示例):
const path=require(path )
模块.导出={
插件选项：{
样式-资源-加载程序:
预处理器：“小于”，
模式：[
//配置哪些文件需要自动导入
path.join(__dirname，。/src/xx/xx.less )
]
}
}
}
总结
关于vue项目中少用的技巧这篇文章到此为止。更多关于在vue中少用的技巧，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。