技術標籤：JSnpmvuejavascript

前言

vue內部，編寫less檔案，如何實現主題實時切換的功能呢？有一點要注意的是，在vue某個檔案內，通過import方式引入less npm包，再less.modifyVars是無法實時修改主題的，因為此時的less檔案已編譯完畢，無法觸發webpack的實時更新。

要想實時切換主題，只能將less檔案放在public目錄下，但此時涉及到一個問題，元件內部less檔案那麼多，難道每次修改less檔案，都得手動再在public目錄下的color.less裡改嗎？有沒有一種自動打包目錄下的所有less檔案，並將其生成一個color.less，放在public目錄下的功能嗎？

以上問題，都能得到解決，請看下面內容

內容

專案下面元件的less目錄如下圖所示：

現在需要將這些styles下面的less檔案，自動打包成一個color.less，並將其放在public目錄下，generateTheme.js功能程式碼如下所示：

const fs = require("fs");
const path = require("path");

async function generateTheme({
    outputFilePath
}) {
    try {
        let filePath = path.join(__dirname, './src/styles/index.less');
        let css = "";
        css = combineLess(filePath);
        css = minifyCss(css);
        if (outputFilePath) {
            fs.writeFileSync(outputFilePath, css);
            console.log(
            `