携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
我们都知道less是一种css的扩展语言，它增加了一些css没有的功能，例如less中可以使用变量、函数、层级嵌套等，有了这些功能，就可以让我们项目中的css更加容易维护和扩展。下面我在上篇文章中搭建的vue3框架的基础上，来引入less以及less的全局变量文件。
less安装以及使用
我们需要在项目中安装less以及less-loader这两个npm包，如下：
npm install less --save-dev
npm install less-loader --save-dev
安装完成后，就可以在vue文件中的style标签中进行使用，如下：
<style scoped lang="less">
.index-page {
background-color: #fff;
.content {
font-size: 24px;
.title {
font-size: 28px;
}
}
}
</style>
如上代码所示，我们在style标签中，通过lang="less"设置css样式语言为less，然后就可以使用less语言来进行样式的开发编写，上述代码中，我们通过层级嵌套来设置样式。
less全局变量文件引入
一般一个系统中会有一些整体的样式设置，比如字体大小、主题颜色、圆角大小等，像这些样式一般我们可以将其定义成变量，然后放在一个全局的less变量文件里，然后在需要用到这些属性的页面中，直接引用即可。这样，如果后期我们要对这些属性进行整体更改，也会比较方便。
首先，我们建立一个variables.less文件，里面存放一些属性的定义，如下：
@background-color: #F4F4F4;
@solid-color: #F5F5F5;
@border-radius: 14px;
一般情况下，我们只需在项目的入口文件中import引入这个variables.less文件，即可全局进行使用，但在vue的项目中，你会发现，即使我在入口文件中引入了less变量文件，然后在其他页面中使用variables.less文件中的变量时，变量还是找不到，但在需要使用的页面中再次import引入下variables.less文件后，就可以正常使用。
但是，既然我们定义这是一个全局的样式变量文件，如果每个页面都要单独再进行引入才可以使用就多少有点不合常理，这种情况下，我们可以使用webpack的additionalData配置来将variables.less文件整体引入，在vue.config.js中增加如下配置即可：
将less选项中的additionalData设置成@import "@/style/variables.less";后，即表示全局引入了此文件，页面中就可以直接使用variables.less文件中的变量了。
