@douyinfe/semi-scss-compile

Scss 半设计编译工具

说明

主要有以下两种使用方案:

• 用于半设计系统中的Sever侧消费. 发布主题时,请将节点一侧的脚本调用到 将自定义主题包编译为完整的 半. css 文件
• 发布前 @douyinfe/semi-foundation,构建完整的半个css文件

使用量

命令行

npm i -g @douyinfe/semi-scss-compile

semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --icon="path/to/'@douyinfe/semi-icons'" --output="path/to/output.css" --min

# or for short

semi-build-scss -f "path/to/foundation" -t "path/to/theme" -i "path/to/'@douyinfe/semi-icons'" -o "path/to/output.css" -m

JS API( API)

const { compile } = require('@douyinfe/semi-scss-compile');
const path = require('path');

function resolve(dir) {
    return path.join(__dirname, '../..', dir);
}

//eg

compile({
    foundationPath: resolve('semi-foundation/'),
    themePath: resolve('semi-theme-default/'),
    iconPath: resolve('node_modules/@douyinfe/semi-icons'),
    outputPath: resolve('semi-ui/dist/css/semi.min.css'),
    isMin: true
});

compile({
    foundationPath: resolve('semi-foundation/'),
    themePath: resolve('semi-theme-default/'),
    iconPath: resolve('node_modules/@douyinfe/semi-icons'),
    outputPath: resolve('semi-ui/dist/css/semi.css'),
    isMin: false
});

高级 API

const { generateScssMap, writeFile, compilerFromScssMap } = require('@douyinfe/semi-scss-compile');
const fs = require('fs-extra');

const isMin = false;
const scssMap = generateScssMap("path/to/foundation", "path/to/theme", "path/to/'@douyinfe/semi-icons'");
const tempDir = writeFile(scssMap);
const result = compilerFromScssMap(path.join(tempDir, 'index.scss'), isMin);
fs.outputFileSync(outputPath, result.css);

维护者

半团队

许可证

麻省理工学院