快速搭建一个支持TypeScript + SCSS的React项

安装脚手架

npm install -g create-react-app --registry=https://registry.npm.taobao.org

启动typescript项目

yarn create-react-app my-app --typescript 

修改.gitignore文件，提交git时可以过滤掉很多无用的文件

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*


# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

安装sass-loader、node-sass

yarn add sass-loader node-sass --save-dev  --registry=https://registry.npm.taobao.org

调出配置文件，手动配置scss

 yarn eject

yarn eject失败

 react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:

.idea/vcs.xml
.idea/watcherTasks.xml
M package.json
src/test.scss
M yarn.lock
.idea/inspectionProfiles/
.idea/misc.xml
.idea/modules.xml
.idea/my-app.iml
.idea/workspace.xml

Remove untracked files, stash or commit any changes, and try again.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

提示我们先用git完成暂存

git init
git add .
git commit -m 'Saving before ejecting'
yarn eject

准备配置scss

我们可以看出脚手架已经为我们配置好了scss，我们不需要再手动配置了，那前面的yarn eject 是不是多余的？其实不是，因为一个复杂的项目通常会引入很多的loader，脚手架可不会什么都给你配好，很多时候还需要手动配置。

我们写一个scss文件测试一下，搞定。

测试打包

sudo yarn build

我们部署一下打包的代码，正确运行，我们成功的搭建了一个支持typescript + scss的react项目。