配置

基础搭建是根据告别2023前，来一次webpack+react的搭建demo，这篇文件进行搭建最简单的webpack+react的demo作为基础

第一步先配置 styled-components

安装依赖

npm i styled-components babel-plugin-styled-components

修改 .babelrc.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      // 让babel认识 styled-components
      "babel-plugin-styled-components",
    ]
  ]
};

修改 src/App.tsx

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: red;
	.abc {
		color: blue;
	}
`;

const App = () => {
  return <div>
		<StyledDiv onClick={() => { console.log(213) }}>
			red
			<div className='abc'>
                            blue
			</div>
		</StyledDiv>
	</div>
}

export default App

效果

生产环境配置

只需要修改 .babelrc.js 两个值

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      "babel-plugin-styled-components",
      {
          // 是否展示文件名到类名里面
        fileName: process.env.NODE_ENV !== 'production'
         // displayName表示是否展示块名和文件名（即App_StyledDiv）
         // displayName的权重是包含且大于fileName的配置的
         // 一旦displayName设置为false，fileName设置为true也不会展示文件名
        displayName: process.env.NODE_ENV !== 'production',
      }
    ]
  ]
};