TypeScript+React+Webpack+CssModule实践

初始化项目

这里我们使用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的配置文件了

TypeScript+React+Webpack+CssModule实践_第1张图片
image

那么怎么开启css modules呢?超简单---->

  1. 打开config里面的webpack.config.dev.js
  2. TypeScript+React+Webpack+CssModule实践_第2张图片
    image
  3. 完成了

现在让我们在代码里面写点css module 的语法来试试


TypeScript+React+Webpack+CssModule实践_第3张图片
image
  1. 运行npm run start来看看效果

不出意外的话你会看到这个画面


TypeScript+React+Webpack+CssModule实践_第4张图片
image

这是个神马情况?在google之后终于找到了答案,原来ts-loader是默认只将ts文件和js文件作为模块来看的,所以在这儿我们引入了css文件是不会被ts-loader认识的所以出错也在理所当然了,那怎么解决这个问题呢。
伟大的stackoverflow告诉了我们答案,Duang!Duang!
只要在项目文件里加入一个declaration.d.ts文件


TypeScript+React+Webpack+CssModule实践_第5张图片
image

问题就迎刃而解了。

最后这篇文章没有干货!没有干货!!!!!

你可能感兴趣的:(TypeScript+React+Webpack+CssModule实践)