项目使用babel-plugin-import没有起到按需加载样式的效果

[carmel]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.0.0-rc.2

Environment

macos 10.15.6 ，node v14.15.1 ,vue :3.0.2

Reproduction link

#3280

Steps to reproduce

package.json

babel配置

vite.config

页面代码

页面效果

官网指导链接：https://2x.antdv.com/docs/vue/getting-started-cn/

What is expected?

#3280

What is actually happening?

#3280

[zkwolf]

vite就不支持babel吧 vitejs/vite#491

[carmel]

@zkwolf 谢谢，明白了。但还遇到一个问题，我在项目main.js中并没有一次加载antd-vue所有组件：

而是在一个vue-component中引入了一个Button：

但项目起来后，浏览器console中打印了如下信息：

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
(anonymous) @ ant-design-vue.js:79490

请问这是误报吗？

[wzono]

may be you can try it: vite-babel-plugin

[zch233]

@carmel 我也遇到了，解决了吗？

[carmel]

@carmel 我也遇到了，解决了吗？

没有解决呐，issue closed状态时作者可能不会有通知的

[zkwolf]

@carmel 你上面那个问题也不算误报吧，没有用babel-import-plugin的话就没有按需加载效果了，自然就有提示

[zch233]

@zkwolf 老哥，vite 怎么配置，

[psaren]

@zch233
try to use vite-plugin-imp for vite 2.x

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    vue(), 
    vitePluginImp({
      libList: [
        {
          libName: 'ant-design-vue',
          style(name) {
            return `ant-design-vue/es/${name}/style/index.css`
          }
        },
      ]
    })
  ]
})

[qiuquanwu]

https://blog.csdn.net/qq_38494372/article/details/112913555

[morelearn1990]

@zch233
try to use vite-plugin-imp for vite 2.x

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    vue(), 
    vitePluginImp({
      libList: [
        {
          libName: 'ant-design-vue',
          style(name) {
            return `ant-design-vue/es/${name}/style/index.css`
          }
        },
      ]
    })
  ]
})

vitePluginImp 没法解决驼峰命名的组件，会将驼峰命名转换为小写会找不到对应的组件文件夹，比如
import { ConfigProvider } from "ant-design-vue";
会将 ConfigProvider 转换为 configprovider 但是真实文件夹是 config-provider 会导入报错

[morelearn1990]

https://blog.csdn.net/qq_38494372/article/details/112913555

按照文中的配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport from "vite-plugin-style-import";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        styleImport({
            libs: [
                {
                    libraryName: "ant-design-vue",
                    esModule: true,
                    resolveStyle: (name) => {
                        return `ant-design-vue/es/${name}/style/index.less`;
                    },
                },
            ],
        }),
    ],
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    "primary-color": "#1DA57A",
                    "link-color": "#1DA57A",
                    "border-radius-base": "2px",
                },
                javascriptEnabled: true,
            },
        },
    },
});

再配合 less 的 modifyVars 还能解决 ant-design-vue 的主题定制的问题

[psaren]

@zch233
try to use vite-plugin-imp for vite 2.x

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    vue(), 
    vitePluginImp({
      libList: [
        {
          libName: 'ant-design-vue',
          style(name) {
            return `ant-design-vue/es/${name}/style/index.css`
          }
        },
      ]
    })
  ]
})

vitePluginImp 没法解决驼峰命名的组件，会将驼峰命名转换为小写会找不到对应的组件文件夹，比如
import { ConfigProvider } from "ant-design-vue";
会将 ConfigProvider 转换为 configprovider 但是真实文件夹是 config-provider 会导入报错

@morelearn1990 update vite-plugin-imp to v2.0.4 !

[maixing]

有可能less版本高的问题，我的配置，现在可以实现按需加载

vue.config.js配置
module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } }
babel.config.js配置
plugins: [ [ 'import', { libraryName: "ant-design-vue", libraryDirectory: "es", style: true } ] ]

[JinPengGeng]

借楼问一下，有做IE11兼容吗？ 能给个例子啥的吗