create-react-app 搭建项目踩坑记录
中文说明
搭建前端开发环境笔记
由npx create-react-app articles_published_system创建的项目
后来漏掉了typescript支持,原本可以由命令npx create-react-app articles_published_system --template typescript可以直接创建支持ts的应用
后续要将ts添加到已有项目中,用以下命令:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
项目中配置sass:
执行
yarn add node-sass下载包(按理说执行npm install node-sass --save也应该有用,但是我这边报错了)。报错如下:

我的vscode和node版本都是最新的
建议大家用
yarn来安装项目发现启动后sass会报错
解决办法:sass指定版本为
^1.43.5,postcss-pxtorem为^5.1.1,不要安装node-sass了前端生态配置仍然复杂
将样式文件后缀改为
.scss并在tsx或者js文件中引入,项目会自动编译。
为了实现自适应,给项目配置postcss-pxtorem
执行
yarn add lib-flexible postcss-pxtorem在应用入口引入
import 'lib-flexible'执行
npm run eject可以打开create-react-app应用的配置文件在
config/webpack.config.js文件中配置postcss,位置及方法如下图:


UI库使用antdesign
安装antd,
yarn add antd在App.css 中导入样式
@import '~antd/dist/antd.css',然后在组件中引入相应的ui组件就可以用了。
完~