Vue 中 Less 的寫法
Vue.js 中使用 Less 是一種常見的做法，它允許在 Vue 元件中使用 Less 樣式表。以下是如何在Vue 中使用Less：
1. 安裝Less 編譯器
<code>npm install --save-dev less less-loader</code>
2. 在vue.config.js 中設定
在vue.config.js 檔案中，新增以下設定：
<code class="js">module.exports = {
css: {
loaderOptions: {
less: {
// 若有 less 文件中的路径指向其他 less 文件，需要指定 less 文件所在的路径
lessOptions: {
paths: [path.resolve(__dirname, 'src', 'less')]
}
}
}
}
};</code>3. 建立Less 樣式表
在src 目錄下建立一個.less 文件，例如style.less：
<code class="less">body {
background-color: #f5f5f5;
}</code>4. 在Vue 元件中引入Less
在Vue 元件的<style> 標籤中，使用lang="less" 屬性來指定該樣式表是Less：
<code class="vue"><template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<style lang="less">
@import "@/style.less";
.hello {
color: red;
}
</style></code>5. 編譯Less
在開發過程中，可以使用npm run serve 指令啟動一個開發伺服器，它將自動監聽並編譯Less文件。
在打包部署時，使用 npm run build 命令來建立項目，它將編譯 Less 檔案並將其包含在最終的建置中。
以上是vue中less的寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
