在網站開發中，我們常常使用CSS來進行樣式設計，而less又是比較流行常用的一種CSS擴展語言。使用less可以大大簡化樣式代碼的書寫，提高開發效率。下面我們就來介紹一下在Vue項目中如何引入less。

首先，我們需要在項目中安裝less。可以使用npm來進行安裝，使用以下命令：

npm install less less-loader --save-dev

這里使用了less-loader來解析less文件，less-loader是一個webpack loader，所以我們需要確保當前項目已經安裝了webpack。

安裝完之后，我們需要在webpack配置文件中進行相應的配置。在webpack配置文件中，找到對應的module.rules中添加以下內容：

{
test: /\.less$/,
use: [
"vue-style-loader",
"css-loader",
"less-loader",
],
},

上面的配置中，我們使用vue-style-loader將css代碼嵌入到頁面中，css-loader將css轉換為commonjs語法，less-loader將less文件轉換為css文件。

然后，在我們的vue組件中，可以使用以下方式引入less文件：

<style lang="less">
@import '~@/styles/common.less';
/* 樣式代碼 */
</style>

上面的代碼中，@表示當前項目根目錄下的src文件夾，styles文件夾是我們自己創建的存放less文件的文件夾。因此，@/styles/common.less表示項目根目錄下的src/styles/common.less文件。

如果需要在全局中引入less，我們可以在main.js中進行相應的配置：

import "@/styles/common.less";

最后，我們來展示一下引入less后的一個vue組件代碼：

<template>
<div class="demo">
This is a demo component.
</div>
</template>
<style lang="less">
@import '~@/styles/common.less';
.demo {
margin: 20px;
padding: 10px;
background-color: @bg-color;
color: @text-color;
}
</style>

在上面的代碼中，我們使用@bg-color和@text-color來引用common.less文件中定義的變量，從而簡化了代碼的書寫。

通過以上介紹，我們可以看到，在vue項目中引入less十分方便。只需要安裝相應的loader，進行簡單的webpack配置，就可以愉快地書寫less代碼了。