gs-theme v1.1.5

自定义主题

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://git@gitlab.gridsum.com: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 命令时，必须在项目根目录下，否则依赖会找不到