https://github.com/taixw2/making-element-ui-theme

能够更方便的制作一个element-ui的主题
https://github.com/taixw2/making-element-ui-theme

Last synced: 5 days ago
JSON representation

能够更方便的制作一个element-ui的主题

• Host: GitHub
• URL: https://github.com/taixw2/making-element-ui-theme
• Owner: taixw2
• Created: 2016-12-15T11:02:27.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-17T04:54:37.000Z (almost 8 years ago)
• Last Synced: 2024-10-30T01:44:42.515Z (14 days ago)
• Language: CSS
• Homepage: https://taixw2.github.io/element-ui/index.html#/form
• Size: 676 KB
• Stars: 11
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 更方便定制element-ui主题

饿了么提供了许多优秀的组件，但是其组件的风格一直备受诟病，

于是基于element-ui提供的主题工具，`./element-theme` `element-theme-default`

对几乎所有组件的尺寸进行了缩小，以及对色彩线条阴影等进行了些许调整。

## 开始

``` bash

git clone [email protected]:taixw2/make-element-ui-theme.git et

cd et && npm install

```

## 开发模式

``` bash

npm run dev

# 这一步会使用webpack检测css的变动以及使用gulp输出编译后的css

# 初次启动会提示 ./theme/index.css错误，可以忽略这个错误，因为此时gulp还没有编译编译完成，

```

## 生成

``` bash

npm run build

#会在dest目录生成一个theme目录，直接引用该目录下的index.css即可

improt ./dist/theme/index.css

```

## 增加自定义变量

1. 使用当期目录下的element-theme-default

  需要修改node_modules/element-theme/lib/config.js中的themePath的路径

2. 或者直接修改node_modules/element-theme-default/中的样式文件

## 主题预览 ：

[https://taixw2.github.io/element-ui/index.html#/form](https://taixw2.github.io/element-ui/index.html#/form)

## 引入该主题

#### 安装

``` bash

npm install element-thin-ui --save

```

#### 引入

``` bash

require("element-thin-ui/index.css");

#或者

import "element-thin-ui/index.css";

```