在 Vue 中使用 Less 是一種流行的 CSS 預(yù)處理器，它可以讓我們更加靈活地管理樣式，使用變量、嵌套等語(yǔ)言特性，并生成更加易于維護(hù)的樣式代碼。下面我們將介紹在 Vue 中如何使用 Less。

首先，我們需要安裝 Less 和 Less-loader。

npm install less less-loader -D

然后，在項(xiàng)目中找到 vue.config.js 文件（如果沒(méi)有則在項(xiàng)目根目錄創(chuàng)建一個(gè)），并添加以下代碼：

module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}

這樣就配置好了 Less，現(xiàn)在我們可以在 Vue 組件中使用 Less 編寫(xiě)樣式了。以下是一個(gè)簡(jiǎn)單的例子：

< template >< div class="hello" >{{ msg }}< /div>< /template >< style lang="less" >.hello {
color: @color;
}< /style >

在這個(gè)例子中，我們使用了 Less 的語(yǔ)法特性，定義了 @color 變量并將它應(yīng)用到了 .hello 元素的 color 屬性上。

需要注意的是，在使用 Less 的語(yǔ)法時(shí)，我們需要給