CSS模块重复导入疑问：组件多次引用时需手动单次导入吗？

不用特意折腾去确保只导入一次——主流打包工具（比如Webpack、Vite）对CSS模块的重复导入会自动做优化，最终只会把这个CSS文件打包一次，不会因为你在5、6个组件实例里都写了import style from './auth-input.module.css'就重复注入样式。

具体来说，当同一个CSS模块被多次import时，打包工具会识别这是同一个文件的重复引用，只会读取一次文件内容，生成对应的唯一样式类名，所有导入的地方拿到的都是同一个样式对象的引用。既不会产生冗余的CSS代码，也不会导致样式重复生效。

反而如果为了“只导入一次”特意把样式导入抽成公共模块再导出，只会平白增加代码复杂度，不如保持组件内直接导入的写法，既清晰又符合组件封装的逻辑。

内容的提问来源于stack exchange，提问作者Simone Gauli