從 Webpack 到 Vite 的 Less 編譯問題

在 Vue 專案升級過程中，從 Vue2+Webpack 遷移到 Vue3+Vite 時，可能會遇到 Less 編譯錯誤的問題。即使已安裝 Less 相關依賴並配置 vite.config.js，錯誤仍可能出現。

首先，確保安裝了必要的依賴：

1
yarn add less less-loader

接著，在 vite.config.js 中進行如下配置：

1
import { defineConfig } from 'vite';
2
import vue from '@vitejs/plugin-vue';
3

4
export default defineConfig({
5
  plugins: [vue()],
6
  css: {
7
    preprocessorOptions: {
8
      less: {
9
        // 在這裡添加你的 Less 配置
10
        javascriptEnabled: true,
11
      },
12
    },
13
  },
14
});

本次錯誤訊息如下：

1
[vite] Pre-transform error: [less] Error evaluating function `round`: argument must be a number
2
[vite] Internal server error: [less] Error evaluating function `round`: argument must be a number

這是因為 Less 在處理 round 函數時，傳入的參數並非數字。

為了解決此問題，可以在 vite.config.js 的 css.preprocessorOptions.less.lessOptions 中加入以下配置：

1
less: {
2
    math: "always",
3
    relativeUrls: true,
4
    javascriptEnabled: true
5
},

透過這些配置，能順利編譯。

參考資料：

How to add a loader (less-loader) to vite.js (vite.config.js)?