gs-theme
v1.1.5
Published
Theme generator cli tool for GSUI
Downloads
2
Readme
自定义主题
GS-UI 默认提供一套主题,我们提供了两种方法,可以进行不同程度的样式自定义。
在项目中改变SCSS变量
GS-UI的样式变量使用scss编写,如果你的项目也采用scss,那么可以直接在项目中覆盖GS-UI的样式变量。新建一个样式文件,如: var.scss
,写入一下内容:
/* 修改主题色 */
$primary-color: #000;
/* 改变icon字体路径变量 必需 */
$font-path: "~gs-ui/components/icon/";
/* 导入默认主题样式 */
@import "~gs-ui/components/themes/style";
之后,在项目的入口文件中,直接引入以上样式文件即可
import Vue from 'vue'
import Gs from 'gs-ui'
import './var.scss'
Vue.use(Gs)
需要注意的是,覆盖字体路径变量是必需的,将其赋值为 GS-UI 中 icon 图标所在的相对路径即可。
该方法只适用于全局引入GS-UI
使用命令行工具生成主题
如果你的项目没有使用 SCSS,或者需要按需加载,那么可以使用命令行主题工具进行深层次的主题定制:
安装命令行工具
首先安装「主题生成工具」,推荐安装在项目里,也可以使用 -g
安装到全局
npm install gs-theme --registry http://10.201.82.4:4873 --save-dev
这里会安装 gs-theme
到当前项目,你可以通过 node_modules/.bin/gt
(windows用户用 \
) 访问到命令
初始化变量文件
主题生成工具安装成功后,执行 -i
初始化变量文件。默认输出 gs-vars.scss
,当然你可以传参数指定文件输出目录。为了方便,这里采用全局的方式执行命令
gt -i [可以自定义变量文件]
如果使用默认配置,执行后当前目录会有一个 gs-vars.scss
文件。内部包含了主题所用到的所有变量,它们使用 SCSS 的格式定义。大致结构如下:
// 主颜色
$primary-color: #1b9ab0 !default;
$primary-color-hover: #20b0c9 !default;
$primary-color-active: #1a90a3 !default;
$primary-color-light: #41b8cc !default;
$primary-color-lighter: #38b1c5 !default;
// 辅助颜色
$color-white: #fff !default;
$success-color: #4ad06e !default;
$success-color-hover: #5ed57e !default;
$success-color-active: #36cb5e !default;
...
修改变量
直接编辑 gs-vars.scss
文件,例如修改主题色为红色。
$primary-color: red;
编译主题
保存文件后,执行命令编译主题,默认输出到当前目录下的 ./theme
,你也可以添加 -o
参数,指定输入目录,如果你在初始化的时指定了自定义变量文件,你需要加上 -c
参数来指定你的变量文件目录
gt
> building
> ======================================== 100%
> done
可能存在的问题
如果遇到类似错误,请尝试升级你的node版本,或者使用webpack版本进行打包
cnpm install git+ssh://[email protected]:frontend/gs-ui/theme.git#webpack --save-dev
引入自定义主题
全局引入,你只需要在代码中直接引入 theme/themes.css
文件即可
import '../theme/themes.css'
按需加载,需要搭配 babel-plugin-component
一起使用,只需要修改 .babelrc
的配置, 指定 styleLibraryName
路径为自定义主题相对于 .babelrc
的路径,注意要加 ~
。
{
"plugins": [["component", [
{
"libraryName": "gs-ui",
"styleLibraryName": "~theme"
}
]]]
}
注意: 执行
gt
命令时,必须在项目根目录下,否则依赖会找不到