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

【问题标题】：emotion css prop styles not applied when using vite使用 vite 时未应用情感 css 道具样式
【发布时间】：2022-10-20 23:05:24
【问题描述】：

vite@3.1.6
@vitejs/plugin-react@2.1.6
@emotion/react@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 个），所以我将所有内容都归入我的根依赖项

【问题讨论】：

标签： reactjs vite emotion

【解决方案1】：

遵循此article，您的配置似乎应该从此更改

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 配置的一部分

【讨论】：