# element-theme-custom

**Repository Path**: lijinbode/element-theme-custom

## Basic Information

- **Project Name**: element-theme-custom
- **Description**: element-ui自定义主题，根据需要快速编译element-ui的主题，可实现多套主题无缝切换
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-09
- **Last Updated**: 2021-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Element-UI, Gulp

## README

# element自定义主题

## 编译

1. 安装依赖 `npm install`

2. 运行初始化命令`npm run init`此时会自动创建初始化文件

   得到chalk文件夹，这里面是element主题的scss文件

   还有就是src里面有个变量文件`init-var.scss`

3. 根据初始变量文件创建多个变量如创建`theme1red-var.scss`修改样式

4. 执行`npm run build`打包命令即可得到dist下编译好的样式文件

## 使用

项目中使用样式可直接在入口文件引入即可，若添加所有样式则必须

```js
// main.js
import './dist/theme1red-var.css'
```

## 多个自定义主题切换

> 导入多个主题必须使用`npm run build_s`为样式添加命名空间，否则导入样式会被覆盖，该命令会将文件名作为样式的命名空间

使用时可直接导入编译的入口文件`index.css`即可

```js
// main.js
import './dist/index.css'
```

> 注意：导入之后需要通过添加命名空间的样式才会生效