在Vue開發中，我們經常需要使用less來進行css的編寫。而vue cli作為一款集成開發工具，其對于less的支持也是非常出色的，下面我們就來介紹在vue cli中如何正確引用less。

首先，我們需要在項目中安裝less和less-loader。打開終端，進入項目根目錄，執行以下命令：

npm install less less-loader --save-dev

安裝完成后，在我們的項目中創建一個less文件，例如styles.less。在該文件中可以編寫我們需要的樣式。我們再在組件中引用這個less文件，并設置style標簽的屬性為“lang=less”，這樣，我們就可以在Vue組件中使用less了。

<template>
<div class="test">這是一個測試組件</div>
</template>
<style lang="less">
@import 'styles.less';
.test {
font-size: 16px;
color: #333;
}
</style>

上述代碼中，我們在style標簽中引用了styles.less文件，在其中定義了一個名為.test的類，設置了字號為16px，顏色為#333。

如果我們需要在全局中引用一個less文件，可以在main.js文件中設置webpack的require.context，使其在所有組件中自動引入less文件。

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// 引入全局less文件
const requireContext = require.context('./', true, /\.less$/);
requireContext.keys().forEach(requireContext);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h =>h(App)
}).$mount('#app');

上述代碼中，我們使用webpack的require.context來自動引入項目根目錄下所有的.less文件。設置時，第一個參數表示搜索的目錄，第二個參數表示是否搜索子目錄，第三個參數為正則表達式，表示只搜索.less后綴的文件。最后，我們在Vue實例中渲染App組件。

除了使用require.context外，在vue.config.js中也可以設置全局樣式文件，方法如下：

module.exports = {
css: {
loaderOptions: {
less: {
prependData: `@import 'styles.less';`
}
}
}
}

上述代碼中，我們在css.loaderOptions.less中設置了一個prependData屬性，該屬性中包含了引入的全局樣式文件，即styles.less。

綜上所述，在Vue項目中，使用vue cli引入less十分方便，我們只需要在項目中安裝less和less-loader，然后在組件或全局中引用less文件，即可對我們的項目進行樣式的自定義。