build-plugin-at-spa

build-plugin-at-spa

build-scripts 插件，支持基于at的业务开发。

使用

"plugins": [
  "build-plugin-ice-app",
  "@ali/build-plugin-ice-def",
  ["build-plugin-at-spa", { "theme": "teambition" }]
]

在项目目录的build.json中配置该插件。

选项

theme为添加的业务类型，可选值为'teambition'(tb)，'apsara'(专有云)，'infra'(天基)，默认值为 'teambition'。

modifyVars可修改scss变量的值，变量详见 https://design.teambition.com/color：

对亮暗色均生效：

{
  "modifyVars": {
    "gray-08": "#303040"
  }
}

区分亮暗色生效

{
  "modifyVars": {
    "normal": {
      "gray-08": "#303040"
    },
    "dark": {
      "gray-08": "#404030"
    }
  }
}

commonSassResources，用于设置sass-resources-loader的options.resources，可以将一些通用的sass资源（mixin，function等）自动注入到每个scss文件中，避免手动引入。

teamixPrefix，用于业务中 AT 和 @teamix/ui 组件并存，且修改了 @teamix/ui 组件 prefix，并对 @teamix/ui 基础组件做了样式 hack 的情况。用法为：

"plugins": [
  ["build-plugin-at-spa", { "teamixPrefix": "yx-" }]
]

插件会将 teamixPrefix 作为 $teamix-prefix 变量注入，业务组件或业务工程在 hack 基础组件时代码需写成：

$teamix-prefix: 'next-' !default;

.#{$teamix-prefix}btn-text {
  color: var(--color-fill1-6, #8b8b8b) !important;
}

命令行参数

若需要进行暗色模式的开发，build-scripts start --dark，同时修改public/index.html中 teambition.min.css或apsara.min.css为teambition-dark.min.css或apsara-dark.min.css。

若要进行亮暗色同时构建， build-scripts build --dm，构建产物中[name].js、[name].css为亮色主题对应资源文件，[name]-dark.js、[name]-dark.css为暗色色主题对应资源文件。

若需要在start时指定publicPath, build-scripts start --devPublicPath=xxxx