1. 安装npm

这个大家自行百度吧，每个操作系统的安装方法都不太一样，LoL！！

2. 安装create-react-app

# -g 代表gloabal，也就是安装到整个系统级别。
npm install -g create-react-app

3. 创建项目

create-react-app [project-name] --template typescript

4. Sass or Less

create-react-app已经默认支持css与Sass，而且Sass与Less两种Styles在语法和用法上基本上没有区别，都支持变量与OO，所以推荐是用Sass，如果使用Sass，可以忽略一下的Less部分。

5. Working with Sass

5.1 安装node-sass

# 我的create-react-app的版本是4.x，所以node-sass的兼容版本是5.x
npm install node-sass@^5.0.0 --save-dev

5.2 使用Scss

将src文件夹下的App.cssrename为App.scss，然后执行以下代码：

yarn build
yarn start

可以看到scss里面的内容被bundle到了网站的css里面。因为create-react-app的webpack默认支持scss。

6. Working with Less

6.1 获取webpack的权限

yarn eject

6.2 安装Less相关包

# 我的create-react-app的版本是4.x，所以less-loader的兼容版本是5.x
npm install less less-loader@^5.0.0 -save-dev

6.3 修改webpack.config.js

在config文件夹中找到webpack.config.js, 加入如下两端代码。

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
         },
         'less-loader'
         ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: {
                getLocalIdent: getCSSModuleLocalIdent,
            },
        },
        'less-loader'
        ),
},

7. 整体运行效果