请问这个有什么方法不写呢

Question

比如以下的代码：

import React from "react";
import styles from "./Header.module.css";
export const Header: React.FC = () => {
	return ()
}

每个组件中都有类似于import styles from "./Header.module.css"; 这样的代码，有什么方法不写它但同时还能自动引用该文件呢？谢谢

Answer 1

阿莱克斯刘 2021-03-24 11:28:16

不好意思，我有点不太明白你的问题。每个组件都会有“类似于import styles from "./Header.module.css"; 这样的代码”是指什么呢？每个文件都需要文件引入和依赖不是挺正常的一件事情吗？

• 提问者 北风一叶 #1

  老师，不是这样的，我的意思是说，每个组件我们都会创建至少两个文件，一个是`tsx` 文件，一个是`css` 文件，而tsx文件一定会引用css文件，有没有什么方法不写这个引入的代码，让tsx文件自动识别，毕竟名称都是固定的格式。
  
  比如创建header组件，会创建两个文件：
  1.  header.tsx 
  2. header.module.css 
  同时在header.tsx  会引用header.module.css ；
  我们创建footer，会创建以下的两个文件：
  1. footer.tsx
  2. footer.module.css
  同时在footer.tsx中会引用 footer.module.css 
  创建别的组件也是类似的流程，那我们能不能在创建组件后，比如创建了header.tsx文件，在这个文件中不写入 import styles from 
   ./Header.module.css 这行代码，但是header.tsx 又能自动识别 Header.module.css  这个文件呢

• 慕神7231064 回复 提问者 北风一叶 #2

  应该是可以的   首先得重写webpack启动跟打包。用nodejs读取本地文件列表，然后根据命名规则给对应的文件添加样式文件的引入。