mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
119 lines
3.1 KiB
Markdown
119 lines
3.1 KiB
Markdown
# 定制主题
|
||
|
||
### 介绍
|
||
|
||
Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。
|
||
|
||
### 示例工程
|
||
|
||
我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，其中包含了定制主题的基本配置，可以作为参考。
|
||
|
||
### 样式变量
|
||
|
||
Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
|
||
|
||
下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
|
||
|
||
```less
|
||
// Component Colors
|
||
@text-color: #323233;
|
||
@border-color: #ebedf0;
|
||
@active-color: #f2f3f5;
|
||
@background-color: #f7f8fa;
|
||
@background-color-light: #fafafa;
|
||
```
|
||
|
||
## 定制方法
|
||
|
||
### 步骤一 引入样式源文件
|
||
|
||
定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。
|
||
|
||
#### 按需引入样式（推荐）
|
||
|
||
在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式
|
||
|
||
```js
|
||
module.exports = {
|
||
plugins: [
|
||
[
|
||
'import',
|
||
{
|
||
libraryName: 'vant',
|
||
libraryDirectory: 'es',
|
||
// 指定样式路径
|
||
style: (name) => `${name}/style/less`,
|
||
},
|
||
'vant',
|
||
],
|
||
],
|
||
};
|
||
```
|
||
|
||
#### 手动引入样式
|
||
|
||
```js
|
||
// 引入全部样式
|
||
import 'vant/lib/index.less';
|
||
|
||
// 引入单个组件样式
|
||
import 'vant/lib/button/style/less';
|
||
```
|
||
|
||
### 步骤二 修改样式变量
|
||
|
||
使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改，下面是参考的 webpack 配置。
|
||
|
||
```js
|
||
// webpack.config.js
|
||
module.exports = {
|
||
rules: [
|
||
{
|
||
test: /\.less$/,
|
||
use: [
|
||
// ...其他 loader 配置
|
||
{
|
||
loader: 'less-loader',
|
||
options: {
|
||
// 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
|
||
lessOptions: {
|
||
modifyVars: {
|
||
// 直接覆盖变量
|
||
'text-color': '#111',
|
||
'border-color': '#eee',
|
||
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
|
||
hack: `true; @import "your-less-file-path.less";`,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
```
|
||
|
||
如果 vue-cli 搭建的项目，可以在 `vue.config.js` 中进行配置。
|
||
|
||
```js
|
||
// vue.config.js
|
||
module.exports = {
|
||
css: {
|
||
loaderOptions: {
|
||
less: {
|
||
// 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
|
||
lessOptions: {
|
||
modifyVars: {
|
||
// 直接覆盖变量
|
||
'text-color': '#111',
|
||
'border-color': '#eee',
|
||
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
|
||
hack: `true; @import "your-less-file-path.less";`,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
};
|
||
```
|