vite.js 中缩小的样式组件类名

Question

我正在尝试使用样式组件并在开发中拥有完整的类名。可以用babel-plugin-styled-components和 来完成displayName: true，但我的设置不起作用。

有谁知道我做错了什么？

谢谢

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { babel } from '@rollup/plugin-babel';

export default defineConfig({
  plugins: [
    reactRefresh(),
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        ['babel-plugin-styled-components', { displayName: true }]
      ],
    }),
  ],
});

版本

"@babel/preset-env": "^7.14.9",
"@babel/preset-react": "^7.14.5",
"@rollup/plugin-babel": "^5.3.0",
"babel-plugin-styled-components": "^1.13.2",
"styled-components": "^5.3.0"
"vite": "^2.4.4",

Answer 1

您可以按照以下方式进行操作；

1. 首先，安装 babel-plugin-styled-components

npm i babel-plugin-styled-components

或者

yarn add babel-plugin-styled-components

2. 编辑vite.config.js

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false
            }
          ]
        ]
      }
    })
  ]
})

您现在应该看到完整的类名。

来源： https: //github.com/styled-components/babel-plugin-styled-components/issues/350#issuecomment-979873241