[bug] styled-components 结合babel-plugin-styled-components 没有对应的效果.

[HAjiMa666]

我看styled-components中, 使用这个babel-plugin-styled-components 插件后,可以进行更好的调试,可以在源码和调试工具中显示出组件的名字,但是我加上之后,并没有生效 插件功能介绍: https://styled-components.com/docs/tooling#babel-plugin

umi的配置文件

import { defineConfig } from 'umi'
import routes from './src/routes'
import proxy from './config/proxy'

const path = require('path')
interface newConfig extends ReturnType<typeof defineConfig> {
  initialState?: {}
  model?: {}
}

const config: newConfig = {
  plugins: [
    '@umijs/plugins/dist/initial-state',
    '@umijs/plugins/dist/model',
    '@umijs/plugins/dist/request',
    '@umijs/plugins/dist/styled-components'
  ],
  styledComponents: {
    babelPlugin: {
      displayName: true
    }
  },
  hash: true,
  history: {
    type: 'hash'
  },
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputPath: 'dist',
  title: '',
  targets: {
    chrome: 80
  },
  scripts: ['this.globalThis || (this.globalThis = this)'],
  routes: routes,
  clientLoader: {}, //加快路由数据加载
  alias: {},
  initialState: {},
  model: {},
  request: {},
  historyWithQuery: {},
  proxy: proxy,
  extraBabelPlugins: [
    ['babel-plugin-styled-components', { displayName: true }]
  ],
  extraPostCSSPlugins: [
    require('postcss-pxtorem')({
      rootValue: 10,
      unitPrecision: 5,
      propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
      exclude: /node_modules/i
    })
  ]
}

export default config

我所使用的

"umi": "^4.0.33",
"babel-plugin-styled-components": "^2.1.1",

麻烦各位大佬看下

[github-actions[bot]]

由于缺乏足够的信息，我们暂时关闭了该 Issue。请修改（不要回复） Issue 提供最小重现以重新开启。谢谢。

[fz6m]

在没有修复之前，可以用以下方法解决：

- extraBabelPlugins: [
-   ['babel-plugin-styled-components', { displayName: true }]
- ],
+ styledComponents: {
+   babelPlugin: {
+     topLevelImportPaths: ['umi']
+   }
+ },

[HAjiMa666]

在没有修复之前，可以用以下方法解决：

- extraBabelPlugins: [
-   ['babel-plugin-styled-components', { displayName: true }]
- ],
+ styledComponents: {
+   babelPlugin: {
+     topLevelImportPaths: ['umi']
+   }
+ },

好滴好滴 谢谢大佬.我去试试