var-common.scss和
var.scss两个文件内，所以可以读取这两个文件的内容然后将其中对应变量的值替换为前端传过来的变量，替换完成后通过importer函数返回进行编译，具体替换方式也有多种，我同事的方法是自己写了个scss解析器，解析成对象，然后遍历对象解析替换，而我，比较草率，直接用正则匹配解析修改，实现如下：
function(data) {
// 前端传递过来的数据
let updates = data.common
// 两个文件的路径
let commonScssPath = path.join(process.cwd(), 'node_modules/hui/packages/theme/common/var-common.scss')
let varScssPath = path.join(process.cwd(), 'node_modules/hui/packages/theme/common/var.scss')
// 读取两个文件的内容
let commonScssContent = fs.readFileSync(commonScssPath, {encoding: 'utf8'})
let varScssContent = fs.readFileSync(varScssPath, {encoding: 'utf8'})
// 遍历要修改的变量数据
Object.keys(updates).forEach((key) => {
let _key = key
// 正则匹配及替换
key = key.replace('$', '$')
let reg = new RegExp('(' +key + 's*:s*)([^:]+)(;)', 'img')
commonScssContent = commonScssContent.replace(reg, `$1${updates[_key]}$3`)
varScssContent = varScssContent.replace(reg, `$1${updates[_key]}$3`)
})
// 修改路径为绝对路径，否则会报错
let mixinsPath = path.resolve(process.cwd(), 'node_modules/hui/packages/theme/mixins/_color-helpers.scss')
mixinsPath = mixinsPath.split('').join('/')
commonScssContent = commonScssContent.replace(`@import '../mixins/_color-helpers'`, `@import '${mixinsPath}'`)
let huiScssPath = path.join(process.cwd(), 'node_modules/hui/packages/theme/index.scss')
// 编译scss
let result = sass.renderSync({
file: huiScssPath,
importer: [
function (url) {
if (url.includes('var-common')) {
return {
contents: commonScssContent
}
}else if (url.includes('var')) {
return {
contents: varScssContent
}
} else {
return null
}
}
] })
return result.css.toString()
}下载主题
下载的主题包里有两个数据，一个是配置源文件，另一个就是编译后的主题包，包括css文件和字体文件。创建压缩包使用的是jszip，可参考： github.com/Stuk/jszip 。
主题包的目录结构如下：
-theme –fonts –index.css -config.json
实现如下：
async createThemeZip(data) {
let zip = new JSZip()
// 配置源文件
zip.file('config.json', JSON.stringify(data.common, null, 2))
// 编译后的css主题包
let theme = zip.folder('theme')
let fontPath = 'node_modules/hui/packages/theme/fonts'
