使用vite时未应用情感css道具样式

Question

vite@3.1.6

@vitejs/plugin-react@2.1.6

@情感/反应11.10.4反应17.0.2

我的vite配置

{
plugins: [
    react({
        exclude: /\.stories\.(t|j)sx?$/,
        babel: {
            plugins: ["@emotion/babel-plugin"]
        }
    }),
    tsconfigPaths(),
    svgrPlugin()
],
esbuild: {
    logOverride: { "this-is-undefined-in-esm": "silent" },
    jsxFactory: `jsx`,
    jsxImportSource: "@emotion/react",
},
build: {
    outDir: "build",
},
server: {
    port: 3000,
},
optimizeDeps: {
    esbuildOptions: {
        define: {
            // Node.js global to browser globalThis
            global: "globalThis",
        },
        plugins: [
            // Enable esbuild polyfill plugins
            NodeGlobalsPolyfillPlugin({
                buffer: true,
            }),
        ],
    },
},
resolve: {
    preserveSymlinks: true,
    dedupe: ["react", "react-dom", "@emotion/styled", "@emotion/core"],
    alias: [
        {
            // this is required for the scss modules
            find: /^~(.*)$/,
            replacement: '$1',
        },
        {
            find: "@emotion/core",
            replacement: getRootPackageDir("@emotion/react"),
        },
        {
            find: "emotion-theming",
            replacement: getRootPackageDir("@emotion/react"),
        },
        {
            find: "@emotion/styled",
            replacement: getRootPackageDir("@emotion/styled"),
        },
    ],
}

}

css支持样式似乎不再应用于任何组件。由于我有多个情感版本(在依赖项中有10个版本，在项目本身中有11个版本)，所以我将所有的内容都混在我的根目录中。

Answer 1

遵循这个文章，似乎您的配置应该从下面的

plugins: [
    react({
        exclude: /\.stories\.(t|j)sx?$/,
        babel: {
            plugins: ["@emotion/babel-plugin"]
        }
    }),
    tsconfigPaths(),
    svgrPlugin()
],

到这个

lugins: [
    react({
        exclude: /\.stories\.(t|j)sx?$/,
        jsxImportSource: "@emotion/react",
        babel: {
            plugins: ["@emotion/babel-plugin"]
        }
    }),
    tsconfigPaths(),
    svgrPlugin()
],

而不是作为esbuild配置的一部分