From 6b2b7ec702aa24ef9d88b805c1a430034c953f6d Mon Sep 17 00:00:00 2001 From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com> Date: Thu, 26 Aug 2021 15:11:47 +0800 Subject: [PATCH] fix(components): exposing style folder for select dropdpwn (#3077) - Fix the error importing in style file - Update plugin usage for `babel-plugin-import` --- packages/components/select-v2/style/css.ts | 5 +--- packages/components/select-v2/style/index.ts | 5 +--- packages/components/select/style/css.ts | 3 +-- packages/components/select/style/index.ts | 3 +-- packages/theme-chalk/src/select-v2.scss | 3 +++ packages/theme-chalk/src/select.scss | 1 + website/docs/en-US/quickstart.md | 19 ++++++++++------ website/docs/es/quickstart.md | 17 +++++++++----- website/docs/fr-FR/quickstart.md | 20 ++++++++++------ website/docs/jp/quickstart.md | 24 ++++++++++++++++++++ website/docs/zh-CN/quickstart.md | 19 ++++++++++------ 11 files changed, 80 insertions(+), 39 deletions(-) diff --git a/packages/components/select-v2/style/css.ts b/packages/components/select-v2/style/css.ts index b1e4645304..ad097b9e87 100644 --- a/packages/components/select-v2/style/css.ts +++ b/packages/components/select-v2/style/css.ts @@ -1,9 +1,6 @@ import '@element-plus/components/base/style/css' -import '@element-plus/theme-chalk/el-select-v2.css' -import '@element-plus/components/select-dropdown-v2/style/css' import '@element-plus/components/input/style/css' import '@element-plus/components/tag/style/css' -import '@element-plus/components/option-item/style/css' -import '@element-plus/components/option-group/style/css' import '@element-plus/components/scrollbar/style/css' import '@element-plus/components/popper/style/css' +import '@element-plus/theme-chalk/el-select-v2.css' diff --git a/packages/components/select-v2/style/index.ts b/packages/components/select-v2/style/index.ts index 2a0d6cdbb5..6777e9ef10 100644 --- a/packages/components/select-v2/style/index.ts +++ b/packages/components/select-v2/style/index.ts @@ -1,9 +1,6 @@ import '@element-plus/components/base/style' -import '@element-plus/theme-chalk/src/select-v2.scss' -import '@element-plus/components/select-dropdown-v2/style/index' import '@element-plus/components/input/style/index' import '@element-plus/components/tag/style/index' -import '@element-plus/components/option-item/style/index' -import '@element-plus/components/option-group/style/index' import '@element-plus/components/scrollbar/style/index' import '@element-plus/components/popper/style/index' +import '@element-plus/theme-chalk/src/select-v2.scss' diff --git a/packages/components/select/style/css.ts b/packages/components/select/style/css.ts index a60b67cc79..6c232d6574 100644 --- a/packages/components/select/style/css.ts +++ b/packages/components/select/style/css.ts @@ -1,9 +1,8 @@ import '@element-plus/components/base/style/css' -import '@element-plus/theme-chalk/el-select.css' -import '@element-plus/components/select-dropdown/style/css' import '@element-plus/components/input/style/css' import '@element-plus/components/tag/style/css' import '@element-plus/components/option/style/css' import '@element-plus/components/option-group/style/css' import '@element-plus/components/scrollbar/style/css' import '@element-plus/components/popper/style/css' +import '@element-plus/theme-chalk/el-select.css' diff --git a/packages/components/select/style/index.ts b/packages/components/select/style/index.ts index 2ac6d21739..8ca0a7964f 100644 --- a/packages/components/select/style/index.ts +++ b/packages/components/select/style/index.ts @@ -1,9 +1,8 @@ import '@element-plus/components/base/style' -import '@element-plus/theme-chalk/src/select.scss' -import '@element-plus/components/select-dropdown/style/index' import '@element-plus/components/input/style/index' import '@element-plus/components/tag/style/index' import '@element-plus/components/option/style/index' import '@element-plus/components/option-group/style/index' import '@element-plus/components/scrollbar/style/index' import '@element-plus/components/popper/style/index' +import '@element-plus/theme-chalk/src/select.scss' diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss index 3b6f279b9b..b53beacd85 100644 --- a/packages/theme-chalk/src/select-v2.scss +++ b/packages/theme-chalk/src/select-v2.scss @@ -3,6 +3,9 @@ @import 'mixins/mixins'; @import 'mixins/utils'; @import 'common/var'; +@import './select-dropdown-v2.scss'; +@import './option-item.scss'; +@import './option-group.scss'; $--input-inline-start: 15px !default; diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index 14ab5518ed..38c78348c0 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -4,6 +4,7 @@ @import 'mixins/utils'; @import 'mixins/var'; @import 'common/var'; +@import './select-dropdown.scss'; @include b(select) { @include set-component-css-var('select', $--select); diff --git a/website/docs/en-US/quickstart.md b/website/docs/en-US/quickstart.md index e85f3a8967..d8ed56f68c 100644 --- a/website/docs/en-US/quickstart.md +++ b/website/docs/en-US/quickstart.md @@ -188,20 +188,25 @@ Then you need to add the code below into your `babel.config.js` file. ```javascript module.exports = { plugins: [ - // ...others [ "import", { libraryName: 'element-plus', + // import component + customName: (name) => { + name = name.slice(3) + return `element-plus/lib/components/${name}` + }, + // import style customStyleName: (name) => { name = name.slice(3) - // this imports the [name].css file into the project. - return `element-plus/es/${name}/style/css` - // if you wish to import the *.scss source file, please uncomment this - // return `element-plus/es/${name}/style`; + // if you need [name].scss source file, you need to uncomment this line + // return `element-plus/lib/components/${name}/style` + // import [name].css + return `element-plus/lib/components/${name}/style/css` }, }, ], - ], -}; + ] +} ``` diff --git a/website/docs/es/quickstart.md b/website/docs/es/quickstart.md index 83692dd3ae..edd42fb61d 100644 --- a/website/docs/es/quickstart.md +++ b/website/docs/es/quickstart.md @@ -202,21 +202,26 @@ A continuación, debe añadir el siguiente código a su archivo `babel.config.js ```javascript module.exports = { plugins: [ - // ...others [ "import", { libraryName: 'element-plus', + // import component + customName: (name) => { + name = name.slice(3) + return `element-plus/lib/components/${name}` + }, + // import style customStyleName: (name) => { name = name.slice(3) - // Si necesita el archivo [nombre].css, debe devolver la siguiente línea - return `element-plus/es/${name}/style/css` // Si necesitas el archivo [nombre].scss, entonces necesitas comentar // la línea de código anterior y descomentar la siguiente línea de código - // return `element-plus/es/${name}/style`; + // return `element-plus/lib/components/${name}/style` + // Si necesita el archivo [nombre].css, debe devolver la siguiente línea + return `element-plus/lib/components/${name}/style/css` }, }, ], - ], -}; + ] +} ``` diff --git a/website/docs/fr-FR/quickstart.md b/website/docs/fr-FR/quickstart.md index ee83565dec..a6eb1516f9 100644 --- a/website/docs/fr-FR/quickstart.md +++ b/website/docs/fr-FR/quickstart.md @@ -197,24 +197,30 @@ Ensuite, vous devez ajouter le code suivant à votre fichier `babel.config.js`. > babel.config.js ```javascript +module.exports = { module.exports = { plugins: [ - // ...others [ "import", { libraryName: 'element-plus', + // import component + customName: (name) => { + name = name.slice(3) + return `element-plus/lib/components/${name}` + }, + // import style customStyleName: (name) => { name = name.slice(3) + // Si vous avez besoin du fichier [nom].scss, vous devez commenter la + // ligne de code précédente et décommenter la ligne de code suivante. + // return `element-plus/lib/components/${name}/style` // Si vous avez besoin du fichier [nom].css, vous devez renvoyer la ligne // suivante - return `element-plus/es/${name}/style/css` - // Si vous avez besoin du fichier [nom].scss, vous devez commenter la - // ligne de code précédente et décommenter la ligne de code suivante. - // return `element-plus/es/${name}/style`; + return `element-plus/lib/components/${name}/style/css` }, }, ], - ], -}; + ] +} ``` diff --git a/website/docs/jp/quickstart.md b/website/docs/jp/quickstart.md index e4bceb0752..18b25593c0 100644 --- a/website/docs/jp/quickstart.md +++ b/website/docs/jp/quickstart.md @@ -197,4 +197,28 @@ module.exports = { ], ], }; + +module.exports = { + plugins: [ + [ + "import", + { + libraryName: 'element-plus', + // import component + customName: (name) => { + name = name.slice(3) + return `element-plus/lib/components/${name}` + }, + // import style + customStyleName: (name) => { + name = name.slice(3) + // [name].scssファイルが必要な場合は、前の行のコードをコメントアウトし、次の行のコードをアンコメントする必要があります。 + // return `element-plus/lib/components/${name}/style` + // [name].cssファイルが必要な場合は、次の行を返す必要があります。 + return `element-plus/lib/components/${name}/style/css` + }, + }, + ], + ] +} ``` diff --git a/website/docs/zh-CN/quickstart.md b/website/docs/zh-CN/quickstart.md index b0740ce226..c5c1f1a3c9 100644 --- a/website/docs/zh-CN/quickstart.md +++ b/website/docs/zh-CN/quickstart.md @@ -176,20 +176,25 @@ npm install babel-plugin-import -D ```javascript module.exports = { plugins: [ - // ...others [ "import", { libraryName: 'element-plus', + // 引入组件 + customName: (name) => { + name = name.slice(3) + return `element-plus/lib/components/${name}` + }, + // 引入样式 customStyleName: (name) => { name = name.slice(3) - // 如果你需要 [name].css 文件，你需要 return 下面这一行 - return `element-plus/es/${name}/style/css` - // 如果你需要 [name].scss 文件，那么你需要注释上一行代码并取消注释下一行代码 - // return `element-plus/es/${name}/style`; + // 如果你需要引入 [name].scss 文件，你需要用下面这行 + // return `element-plus/lib/components/${name}/style` + // 引入 [name].css + return `element-plus/lib/components/${name}/style/css` }, }, ], - ], -}; + ] +} ```