主题配置

典型场景

Trantor 可通过少量的 sass 配置，生成覆盖全局的 css 文件，自定义统一工作台UI主题风格，适应不同项目的需求。

实现方式

1. 基本原理

由于 Trantor 前端是基于 nusi 组件库，样式生成的流程也主要在 nusi 工程中：

2. 如何自定义主题 `scss` 配置文件

以下配置将整个 nusi 主题颜色变为绿色，对辅助色做重新定义，以及对细节样式进行覆盖

// -------- 配置变量覆盖 --------
$primary: #16a085;
$primary-hover: #0da44d;
$blue: #3498dc;
$green: #2ecc71;
$red: #f04844;
$yellow: #ffa847;

// // -------- 细节样式覆盖 --------
.pk-content-container-main {
  background-color: white !important;
}

// layout底色
.pk-layout-content {
  background-color: #f8f8f8;
}

点击这里可以参考更复杂的自定义 scss 示范：scss 配置。

注意：配置 scss 文件本身需要时可以独立编译的 sass，引用的变量需要在自己内部也有定义，也不能 import 外部 scss。

3. 如何生成自定义主题 css

创建一个新的文件夹，假设名字叫做 custom-theme，创建一个 package.json 文件，复制以下内容

{
  "name": "custom-theme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "transform": "nusi-theme-generator transform",
    "transform-custom": "nusi-theme-generator transform -f customfolder",
    "origin": "nusi-theme-generator origin"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@terminus/nusi-theme-generator": "^0.1.2",
    "commander": "^5.1.0"
  }
}

执行 npm i 安装。注意@terminus 的包需要在本机用户目录下的.npmrc 中指定 registry，也可以通过 npm set 命令指定： @terminus:registry=[https://registry.npm.terminus.io/](https://registry.npm.terminus.io/)
执行 npm run origin，会生成一个 origin 文件夹，三个文件分别是\_theme_config.scss，\_theme.scss，\_global.scss，主要参考前两个文件看有哪些可以配置的项目
创建一个 theme 文件夹，将自定义 scss 文件放进来（可以有多个）
执行 npm run transform，脚本会根据 theme 文件夹中所有的 scss 文件生成对应的主题文件 css，xxx.scss => xxx.css
若想要指定文件夹，可按照 package.json 中的 transform-custom 进行改动。

4. 通过配置挂载自定义主题 css

将 css 文件传到 cdn 中
生产环境在工作台容器 dice 配置相关变量
页面在打开时会自动加载 PRESET_CSS_URL 指向的 css 文件，STYLE_PRIMARY_COLOR 中填写 rgb 格式的主题色，用于 css 无法覆盖的代码样式部分。

{
  "PRESET_CSS_URL": "https://terminus-trantor.oss-cn-hangzhou.aliyuncs.com/style-override/sgcc.console.css",
  "STYLE_PRIMARY_COLOR": "rgb(22,160,133)"
}