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

Question

vite@3.1.6
@vitejs/plugin-react@2.1.6
@情感/react@11.10.4react@17.0.2

我的邀请配置

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