semi-design/packages/semi-scss-compile

A Scss compile tool for Semi Design

Description

There are mainly the following two usage scenarios:

• For Sever side consumption in Semi Design System.When publishing the theme, call the script on the Node side to compile the custom theme package into a complete semi.css file
• Before publish @douyinfe/semi-foundation,construct a complete semi.css file

Usage

Command Line

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

semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --output="path/to/output.css" --min=true

# or for short

semi-build-scss -f "path/to/foundation" -t "path/to/theme" -o "path/to/output.css" -m true

JS API

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

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

//eg

compile(resolve('semi-foundation/'), resolve('semi-theme-default/'), resolve('semi-ui/dist/css/semi.min.css'), {isMin: true})
compile(resolve('semi-foundation/'), resolve('semi-theme-default/'), resolve('semi-ui/dist/css/semi.css'), {isMin: false})

Advanced 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");
const tempDir = writeFile(scssMap)
const result = compilerFromScssMap(path.join(tempDir, 'index.scss'), isMin);
fs.outputFileSync(outputPath, result.css);

Maintainers

Semi Teams

License

MIT