2021-11-29 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:

1. 执行yarn add node-sass下载包（按理说执行npm install node-sass --save也应该有用，但是我这边报错了）。

   报错如下：

err.png

我的vscode和node版本都是最新的

建议大家用yarn来安装项目

发现启动后sass会报错

解决办法：sass指定版本为^1.43.5，postcss-pxtorem为^5.1.1，不要安装node-sass了

前端生态配置仍然复杂

2. 将样式文件后缀改为.scss并在tsx或者js文件中引入，项目会自动编译。

为了实现自适应，给项目配置postcss-pxtorem

1. 执行yarn add lib-flexible postcss-pxtorem

2. 在应用入口引入import 'lib-flexible'

3. 执行npm run eject可以打开create-react-app应用的配置文件

4. 在config/webpack.config.js文件中配置postcss，位置及方法如下图：

postcss.png

postcss2.png

UI库使用antdesign

1. 安装antd，yarn add antd

2. 在App.css 中导入样式@import '~antd/dist/antd.css'，然后在组件中引入相应的ui组件就可以用了。

---

完~