babel-plugin-styled-components 在 React 应用程序中与 NODE_ENV=development 配合得很好，但与 NODE_ENV=product 配合得不好

Question

我的 React 应用程序面临以下情况。我使用 babel-plugin-styled-components。当 NODE_ENV!== 生产类生成并注入到 head 标签中并由 React 组件使用时。但是当 NODE_ENV===Production 时，会生成相同的类并将其注入到 head 标签中，但组件不使用它们，但未定义其他不同的类，因此不会应用样式。

从图片中可以看到，使用 NODE_ENV!==Production 定义的相同类被注入到 head 标签中，但是组件（div 标签）使用了未在 head 标签（或任何地方）中定义的 className，因此样式是没有申请。正如我所说，当 NODE_ENV!==Production 时，这种情况不会发生，并且组件使用在 head 标签中定义和注入的类。

如果有人知道为什么会发生这种情况以及如何解决它，我将非常感激。预先感谢。

这是 babel.config.js:

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["babel-plugin-styled-components"]
}

我使用 rollup 作为捆绑器。

谢谢！！！

Answer 1

对于遇到上述相同情况的人，以下是我的解决方法。问题在于汇总配置文件中的此配置：

      alias({
        entries: [
          {
            find: "styled-components",
            replacement: "styled-components/dist/styled-components.js",
          },
          { find: "@", replacement: path.resolve(__dirname) },
        ],
      }),

评论样式组件部分解决了问题：

  alias({
    entries: [
      // {
      //   find: "styled-components",
      //   replacement: "styled-components/dist/styled-components.js",
      // },
      { find: "@", replacement: path.resolve(__dirname) },
    ],
  }),

希望这可以帮助其他人。谢谢。