[英]Styled Component className minified in vite.js
I'm trying to use Styled Components and have full classNames in development.我正在尝试使用 Styled Components 并在开发中拥有完整的类名。 It can be done with
babel-plugin-styled-components
and displayName: true
, but my setting is not working.可以使用
babel-plugin-styled-components
和displayName: true
来完成,但我的设置不起作用。
Does anyone have any idea what am I doing wrong?有谁知道我做错了什么?
Thanks谢谢
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 }]
],
}),
],
});
versions版本
"@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",
You can do it as follows;您可以按如下方式进行;
babel-plugin-styled-components
babel-plugin-styled-components
npm i babel-plugin-styled-components
or或者
yarn add babel-plugin-styled-components
vite.config.js
vite.config.js
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
[
'babel-plugin-styled-components',
{
displayName: true,
fileName: false
}
]
]
}
})
]
})
You should see the full classname now.您现在应该看到完整的类名。
Source: https://github.com/styled-components/babel-plugin-styled-components/issues/350#issuecomment-979873241来源: https://github.com/styled-components/babel-plugin-styled-components/issues/350#issuecomment-979873241
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.