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

@@ -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'

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'

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'

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'

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;
 

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);

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`
         },
       },
     ],
-  ],
-};
+  ]
+}
 ```

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`
         },
       },
     ],
-  ],
-};
+  ]
+}
 ```

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`
         },
       },
     ],
-  ],
-};
+  ]
+}
 ```

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`
+        },
+      },
+    ],
+  ]
+}
 ```

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`
         },
       },
     ],
-  ],
-};
+  ]
+}
 ```