初始化项目
这里我们使用react官方的脚手架create-react-app来生成一个ts版的项目
create-react-app my-app --scripts-version=react-scripts-ts
这里就不细说其他的内容了
自定义webpack的配置
因为这里我们使用create-react-app来创建的项目，如果我们想要自定义webpack的配置的话需要执行
npm run jest来抽离出由react-script控制的webpack配置文件。
目录结构如下图，其中config里面就是webpack的配置文件了
image
那么怎么开启css modules呢？超简单---->
- 打开config里面的webpack.config.dev.js
-
image
- 完成了
现在让我们在代码里面写点css module 的语法来试试
image
- 运行
npm run start来看看效果
不出意外的话你会看到这个画面
image
这是个神马情况？在google之后终于找到了答案，原来ts-loader是默认只将ts文件和js文件作为模块来看的，所以在这儿我们引入了css文件是不会被ts-loader认识的所以出错也在理所当然了，那怎么解决这个问题呢。
伟大的stackoverflow告诉了我们答案，Duang！Duang！
只要在项目文件里加入一个declaration.d.ts文件
image
问题就迎刃而解了。
最后这篇文章没有干货！没有干货！！！！！
网友评论