224 字
1 分鐘
從 Webpack 到 Vite 的 Less 編譯問題
在 Vue 專案升級過程中，從 Vue2+Webpack 遷移到 Vue3+Vite 時，可能會遇到 Less 編譯錯誤的問題。
即使已安裝 Less 相關依賴並配置 vite.config.js，錯誤仍可能出現。
首先，確保安裝了必要的依賴：
yarn add less less-loader接著，在 vite.config.js 中進行如下配置：
import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';
export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { less: { // 在這裡添加你的 Less 配置 javascriptEnabled: true, }, }, },});本次錯誤訊息如下：
[vite] Pre-transform error: [less] Error evaluating function `round`: argument must be a number[vite] Internal server error: [less] Error evaluating function `round`: argument must be a number這是因為 Less 在處理 round 函數時，傳入的參數並非數字。
為了解決此問題，可以在 vite.config.js 的 css.preprocessorOptions.less.lessOptions 中加入以下配置：
less: { math: "always", relativeUrls: true, javascriptEnabled: true},透過這些配置，能順利編譯。
參考資料：
How to add a loader (less-loader) to vite.js (vite.config.js)?
從 Webpack 到 Vite 的 Less 編譯問題
https://laplusda.com/posts/from-webpack-to-vite-handling-less-compilation-errors/ 這篇文章有幫助嗎？
回報錯字、失效連結，或告訴我你想看的延伸主題。