[breaking change] rebuild style struct (#2021)

2025-10-18 09:24:25 +00:00 · 2018-11-03 21:08:06 +08:00
parent a5576762d8
commit 11ce2a602f
165 changed files with 1371 additions and 4729 deletions
--- a/docs/markdown/changelog.en-US.md
+++ b/docs/markdown/changelog.en-US.md
@@ -339,7 +339,7 @@
 - fix Progress text empty [\#1411](https://github.com/youzan/vant/pull/1411)
 - fix Tab random insert order [\#1429](https://github.com/youzan/vant/pull/1429)
 - fix error when use Vue.use in typescript [\#1410](https://github.com/youzan/vant/pull/1410)
- fix vant-css missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426)
+- fix style missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426)


 ## [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11)
@@ -1332,7 +1332,7 @@

 **Breaking changes**

-* remove reset.css in vant-css [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
+* remove reset.css in style [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
 * reconstruct Swipe component, adjust some API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200)
 * optimize Search component，adjust struct [\#198](https://github.com/youzan/vant/pull/198)

@@ -1388,7 +1388,7 @@
 * fix Button active border color [\#150](https://github.com/youzan/vant/issues/150)
 * fix Stepper input style [\#159](https://github.com/youzan/vant/pull/159)
 * fix Waterfall disable props not work when display none [\#166](https://github.com/youzan/vant/pull/166)
-* fix vant-css not compile calc property after build
+* fix style not compile calc property after build
 * fix npm run dev error in MacOS [\#152](https://github.com/youzan/vant/issues/152)
 * fix document router not work in some browsers [\#158](https://github.com/youzan/vant/pull/158)

--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -339,7 +339,7 @@
 - 修复 Progress 文字为空时样式错误的问题 [\#1411](https://github.com/youzan/vant/pull/1411)
 - 修复 Tab 同时进行插入和删除时顺序错误的问题 [\#1429](https://github.com/youzan/vant/pull/1429)
 - 修复 Vue.use 方法 TypeScript 类型错误 [\#1410](https://github.com/youzan/vant/pull/1410)
- 修复 vant-css 依赖丢失 [\#1426](https://github.com/youzan/vant/pull/1426)
+- 修复 style 依赖丢失 [\#1426](https://github.com/youzan/vant/pull/1426)


 ## [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11)
@@ -1325,7 +1325,7 @@

 **Breaking changes**

-* 移除 vant-css 中对 reset.css 的默认引用 [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
+* 移除 style 中对 reset.css 的默认引用 [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
 * 重写 Swipe 组件，调整部分 API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200)
 * 优化 Search 组件，修改原有结构 [\#198](https://github.com/youzan/vant/pull/198)

@@ -1381,7 +1381,7 @@
 * 修复 Button active 状态下边框样式问题 [\#150](https://github.com/youzan/vant/issues/150)
 * 修复 Stepper 组件输入框样式错误 [\#159](https://github.com/youzan/vant/pull/159)
 * 修复 Waterfall 未显示时 disable 属性无法生效的问题 [\#166](https://github.com/youzan/vant/pull/166)
-* 修复 vant-css 构建过程中未编译 calc 属性的问题
+* 修复 style 构建过程中未编译 calc 属性的问题
 * 修复 MacOS 下 npm run dev 报错的问题 [\#152](https://github.com/youzan/vant/issues/152)
 * 修复文档在部分低版本浏览器路由失效的问题 [\#158](https://github.com/youzan/vant/pull/158)
 * 修复文档中遗漏 SwipeItem 组件引入方式的问题 [\#167](https://github.com/youzan/vant/pull/167)
--- a/docs/markdown/contribution.zh-CN.md
+++ b/docs/markdown/contribution.zh-CN.md
@@ -34,7 +34,6 @@ npm run dev
 ### 目录结构

 - 仓库的组件代码位于 packages 下，每个组件一个文件夹
- 组件样式代码位于 packages/vant-css/src 下，vant-css 也会在发布时单独发包
 - docs 目录下是文档网站的代码，本地开发时可以在目录下运行 npm run dev 开启文档网站

 项目目录大致如下：
@@ -59,10 +58,11 @@ packages
 |  ├─ test        # 单元测试
 |  ├─ zh-CN.md    # 中文文档
 |  ├─ en-US.md    # 英文文档
+|  ├─ index.less  # 组件样式
 |  └─ index.vue   # 组件入口
-└─ vant-css
-   ├─ index.css   # 样式入口
-   └─ button.css  # 组件样式
+|
+├─ index.js       # 所有组件入口
+└─ index.less     # 所有组件样式
 ```

 ### 组件文档
--- a/docs/markdown/quickstart.en-US.md
+++ b/docs/markdown/quickstart.en-US.md
@@ -41,7 +41,7 @@ yarn add vant

 ```html
 <!-- import style -->
-<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css" />

 <!-- import script -->
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -94,8 +94,7 @@ import { Button } from 'vant';

 ```js
 import Button from 'vant/lib/button';
-import 'vant/lib/vant-css/base.css';
-import 'vant/lib/vant-css/button.css';
+import 'vant/lib/button/style';
 ```
 
 #### 3. Import all components
@@ -103,7 +102,7 @@ import 'vant/lib/vant-css/button.css';
 ```js
 import Vue from 'vue';
 import Vant from 'vant';
-import 'vant/lib/vant-css/index.css';
+import 'vant/lib/index.css';

 Vue.use(Vant);
 ```
--- a/docs/markdown/quickstart.zh-CN.md
+++ b/docs/markdown/quickstart.zh-CN.md
@@ -47,7 +47,7 @@ yarn add vant

 ```html
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">

 <!-- 引入组件 -->
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -104,8 +104,7 @@ import { Button, Cell } from 'vant';

 ```js
 import Button from 'vant/lib/button';
-import 'vant/lib/vant-css/base.css';
-import 'vant/lib/vant-css/button.css';
+import 'vant/lib/button/style';
 ```
 
 #### 方式三. 导入所有组件
@@ -113,7 +112,7 @@ import 'vant/lib/vant-css/button.css';
 ```js
 import Vue from 'vue';
 import Vant from 'vant';
-import 'vant/lib/vant-css/index.css';
+import 'vant/lib/index.css';

 Vue.use(Vant);
 ```
--- a/docs/markdown/theme.en-US.md
+++ b/docs/markdown/theme.en-US.md
@@ -7,14 +7,14 @@ You can import the postcss source code in your own project, then use [postcss-th

 ```javascript
 // import base style
-import 'vant/packages/vant-css/src/base.css';
+import 'vant/packages/style/base.css';

 // import component style
-import 'vant/packages/vant-css/src/button.css';
-import 'vant/packages/vant-css/src/checkbox.css';
+import 'vant/packages/button/index.css';
+import 'vant/packages/checkbox/index.css';
 ```

-Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css).
+Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/style/var.less).

 ```javascript
 module.exports = {
@@ -45,10 +45,10 @@ Vant also support local build to custom themes.
 ```bash
 # Clone the repository
 git clone git@github.com:youzan/vant.git
-cd packages/vant-css
+cd packages/style
 ```

-In the local vant-css repository, modify the variables in src/common/var.css, then execute the following build command to generate the style file.
+In the local style repository, modify the variables in src/var.less, then execute the following build command to generate the style file.
 ```bash
 npm run build
 ```
--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@@ -7,14 +7,14 @@

 ```javascript
 // 引入基础样式
-import 'vant/packages/vant-css/src/base.css';
+import 'vant/packages/style/base.css';

 // 引入组件对应的样式
-import 'vant/packages/vant-css/src/button.css';
-import 'vant/packages/vant-css/src/checkbox.css';
+import 'vant/packages/style/button/index.css';
+import 'vant/packages/style/checkbox/index.css';
 ```

-接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
+接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/style/var.less)

 ```javascript
 module.exports = {
@@ -37,15 +37,15 @@ module.exports = {
 ```

 ### 方案二. 本地构建
-可以通过在本地构建 vant-css 的方式生成所需的主题
+可以通过在本地构建 style 的方式生成所需的主题

 ```bash
 # 克隆仓库
 git clone git@github.com:youzan/vant.git
-cd packages/vant-css
+cd packages/style
 ```

-在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
+在本地 style 仓库中，修改 src/var.less 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
 ```bash
 npm run build
 ```