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

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

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

npm i babel-plugin-styled-components

或

yarn add babel-plugin-styled-components

编辑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

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

Styled Component className minified in vite.js

javascript

reactjs

styled-components

rollupjs

vite