通过nodejs和less生成主题色

实现思路：读取配置，通过less解析文件，替换变量，输出css

代码如下

const fs = require("fs");
const path = require("path");
const less = require("less");
const config =require("./theme.config");
const outPutPath =config.outPutPath;
const themeList =config.themeList;
const platformList=config.platform

const themeVas =config.redthemeVas;

const log = (...msg) => {
  console.log("project-gen-theme: ", ...msg);
};
// 其他变量文件夹
const dir = path.join(__dirname, "css");

const generateTheme = (platform, theme) => {
  log(theme);
  try {
    const cssData = fs.readFileSync(
      path.join(__dirname, "css/index.mudle.less"),
      "utf-8"
    );
    // const rootDataBuffer =Buffer.from(rootData);
    // const totalLength = rootDataBuffer.length + cssData.length ;
    // const newBuffer =Buffer.concat([rootDataBuffer, cssData],totalLength)
    less.parse(
      cssData,
      {
        paths: [dir],
        modifyVars: themeVas,
        javascriptEnabled: true,
        compress: true,
        javascriptEnabled: true,
        rootpath: "http://www.cnd.com", //url替换路径
      },
      (err, root, imports, options) => {
        if (!err) {
          const parseTree = new less.ParseTree(root, imports);
          const result = parseTree.toCSS(options);
          const outPut = path.join(__dirname, platform, outPutPath);
          fs.mkdirSync(outPut, { recursive: true });
        const str =  Object.keys(themeVas).map((key)=>{
            return `${key.replace("@","--")}: ${themeVas[key]}`
          })
          const rootData = `:root{${str.join(";")}}\n`;
          fs.writeFileSync(path.join(outPut, `${theme}.css`), `${rootData} ${result.css}` );
        } else {
        }
      }
    );
  } catch (e) {
    console.log(e, "ee");
  }
};

const genTheme = (platform) => {
  themeList.map((key) => {
    const theme = key;
    return generateTheme(platform, theme);
  });
};
platformList.forEach((platform)=>{
  genTheme(platform);
})

theme.config配置如下

module.exports ={
   outPutPath:"public",
   platform:["pc"],
   themeList:  ["green", "blue", "red", "dark"],
   redthemeVas: {
       "@primary-color": " #111",
       "@primary-color-deep": " #333",
       "@primary-color-disabled": " #eee",
       "@checkbox-disabled-color": " #fefefe",
       "@radio-disabled-color": " #ccc",
       "@switch-color": " #454545",
       "@datepicker-hover": " red",
       "@theme-text-color": " blue",
       "@theme-text-color-disabled": " red",
       "@theme-text-color-hover": " red",
       "@theme-text-color-active": " #2e5bb8",
     }
}

代码地址

less的操作主要是参考这里