如何初始化项目

CRA脚手架新建项目

create-react-app xxx(输入项目名，不能有大写字母)

引入CSS预编译插件

SASS

sass在CRA的webpack已经有配置过了，所以我们只需要下载sass插件就可以直接使用,下载两个插件，一个sass，一个sass-load，sass-load是做webpack转换的。

因为CSS预编译插件我们只需要在开发环境使用，所以-D安装，在生产环境下时这个插件不会保存进package.json中。如果要在生产环境也保存，就需要使用-s安装。

npm install sass sass-loader -D

LESS

引入模块化

手机端适配

设置根字体大小

安装amfe-flexible插件

npm install amfe-flexible -s

然后引进主入口文件

import “amfe-flexible”;

重置样式

在src下新建一个文件夹asset(叫什么其实无所谓)，将重置样式表放进去，然后再主入口文件中引入这个重置样式表。

自动转换单位

下完插件后还需要去webpack做二次配置，和安装装饰器的操作一样，做完下面和安装装饰器一样的操作之后，我们可以去我们新增的config-overrides.js文件中查看，会发现我们实际上是从customize-cra这个npm包中解构出了装饰器，我们想要做移动端适配或者less的webpack配置也可以通过这个包来做（通过npm上搜索这个包并查看他的API文档）。

做移动端适配我们需要解构出addPostcssPlugins函数，并且在下面的override后面的括号中调用，这里推荐直接copy官网的。

安装完成后，我们发现这个适配其实还调用了另一个包：postcss-px2rem，直接npm下载下来就可以了。

可能的问题

如果发现效果不生效，有可能是package.json文件中的react-script的版本和现在的包不兼容，可以尝试退回react-script的4版本，应该就可以解决问题。

npm install react-script@4

customize-cra的webpack配置（该npm包中包含装饰器，less，移动端适配等AP接口）

// config-overrides.js
// 在我们新增的文件中添加这些语句，如果之前调用过同样的包，可以直接在那个包上解构并调用。
const { override, addPostcssPlugins } = require("customize-cra");
module.exports = override(
  addPostcssPlugins([require("postcss-px2rem")({ remUnit: 37.5 })])
);

先安装三个插件

npm install @babel/core @babel/plugin-proposal-decorators @babel/preset-env

创建 .babelrc

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
}

创建config-overrides.js

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')
function resolve(dir) {
    return path.join(__dirname, dir)
}
const customize = () => (config, env) => {
    config.resolve.alias['@'] = resolve('src')
    if (env === 'production') {
        config.externals = {
            'react': 'React',
            'react-dom': 'ReactDOM'
        }
    }
    return config
};
module.exports = override(addDecoratorsLegacy(), customize())

安装依赖

npm install customize-cra react-app-rewired

修改package.json

...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
...