标签：const nodejs color less 生成 platform theme config

实现思路：读取配置，通过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的操作主要是参考这里

标签：const,nodejs,color,less,生成,platform,theme,config
来源： https://www.cnblogs.com/heihei-haha/p/16379406.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。