首先使用 cra 创建项目

CSS normalize

adding-css-reset
在 index.css 中加上 @import-normalize
作用：保证在不同浏览器上的默认样式相近
（CSS reset是取消默认样式）

支持 SCSS

adding-a-sass-stylesheet
让 React 应用支持 sass，React 只支持 node-sass，但是 node-sass 的下载速度慢，本地编译慢，因此使用 dart-sass 代替 node-sass
npm6.9 支持一个新功能 package alias，可偷梁换柱

  1. yarn add --dev node-sass@npm:dart-sass@1.25.0

然后将 .css 文件改为 .scss 文件即可

CSS import

Vue2 在 css 中

  1. import '@components/button'

React 在 css 中不需要@

  1. import 'components/button'

React 在 ts 中引入：在 tsconfig.json 文件中加上以下内容
在 js 中引入：在 jsconfig.json 文件中加上以下内容
详见 absolute-imports

  1. {
  2.   "compilerOptions": {
  3.     "baseUrl": "src"
  4.   },
  5.   "include": ["src"]
  6. }

helper.scss

创建 src/helper.scss，里面放公用变量（$red: #f00;），在 index.scss 或 App.scss 中引用 @import "helper"

style-component

一种 CSS in JS 的方案，在 React 中非常好用，因为 React 是 HML in JS。
https://github.com/styled-components/styled-components