在className中小型化的样式组件vite.js

Question

我正在尝试使用样式化的组件，并在开发中拥有完整的classNames。这可以用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

1. 编辑

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