vue项目，如何在vite中配置ant design vue中css的cdn信息

Question

现在想做一个基于vite的项目，涉及到了用cdn去加载一些包。现在的实现方案是

export default defineConfig({
    plugins: [vue()],
    base: './',
    build: {
        sourcemap: true
    },
    resolve: {
        alias: {
            "vue":"https://esm.sh/vue@3.0.5",
            "vuex":"https://esm.sh/vuex@4.0.2",
            "axios":"https://esm.sh/axios@0.21.1",
            "dayjs":"https://esm.sh/dayjs@1.10.5",
            "ant-design-vue":"https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6",
        }
    }
})

这样做的话，虽然js正常加载了，但是css在加载的时候报如下错误

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

目前感觉原因是我在main.js中使用了

import 'ant-design-vue/lib/grid/style/index.css'

这样的语句，但在网上搜索了一番后没有找到类似的处理方案。

现在在考虑是否使用官方文档里的rollupOptions来进行配置，但又没找到比较合适的示例代码。

求有经验的朋友指导，直接贴个类似的代码片段或可以正常使用的项目的git链接都可以

Answer 1

你的意思去掉import 'ant-design-vue/lib/grid/style/index.css' 就不出现报错了吗？你js是cdn那css不因该也是cdn吗？
有可能是这个路径错误 import 'ant-design-vue/lib/grid/style/index.css'

export default defineConfig({
    plugins: [vue()],
    base: './',
    build: {
        sourcemap: true
    },
    resolve: {
        alias: {
            "vue":"https://esm.sh/vue@3.0.5",
            "vuex":"https://esm.sh/vuex@4.0.2",
            "axios":"https://esm.sh/axios@0.21.1",
            "dayjs":"https://esm.sh/dayjs@1.10.5",
            "ant-design-vue":"https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6",
            "antd-vue-style":"https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6/lib/grid/style/index.css"
        }
    }
})

然后再main.js里import antd-vue-style 。这样试试