从0到1创建React项目+TS（1）创建项目，配置less、全

1、安装

npm install -g create-react-app

2、创建项目

create-react-app 项目名 --template typescript

3、删除项目中不必要的文件
4、启动项目

npm run start

配置less
1、安装

npm install less less-loader --save-dev

2、添加less的全局类型声明(在react-app-env.d.ts中添加以下内容)

declare module "*.less" {
  const less: any;
  export default less;
}

3、配置webpack对less支持
(1) 在react项目中暴露webpack配置文件，命令行即：yarn eject 或 npm run eject
(2) 在执行yarn eject 或 npm run eject时，需要本地没有代码可以更新

git add .
git commit -m ""
yarn eject 或 npm run eject

4、打开配置文件config/webpack.config.js
在73行代码左右添加以下配置

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

在第508行左右添加如下代码：

 {
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 2,
       // modules: true, 如果仅打开cssModule  那么原类名 将会没有前缀，无法与自己的样式类名关联，所以下边做法可取
       sourceMap: isEnvProduction
       ? shouldUseSourceMap
       : isEnvDevelopment,
       modules: {
         mode: 'icss',
       },
     },
     'less-loader'
   ),
   sideEffects: true,
 },

 {
   test: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 2,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
       modules: {
         mode: 'local',
         getLocalIdent: getCSSModuleLocalIdent,
       },
     },
     'less-loader'
   ),

 },

5、重新启动项目，在项目中引入less文件可正常使用

项目中如果遇到多个页面使用一个变量的情况下，需要反复引入，可以直接配置全局注册
（1）安装

npm install --save-dev style-resources-loader

(2) 打开配置文件config/webpack.config.js进行配置,直接复制替换即可，注意引用路径和文件名称

            {
              test: lessRegex,
              exclude: cssModuleRegex,
              use: [
                ...getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                      ? shouldUseSourceMap
                      : isEnvDevelopment,
                  },
                  'less-loader'
                ),
                {
                  loader: 'style-resources-loader',
                  options: {
                    patterns: path.resolve(__dirname, '../src/common.less'),
                  },
                },
              ],
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: [
                ...getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                      ? shouldUseSourceMap
                      : isEnvDevelopment,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                  },
                  'less-loader'
                ),
                {
                  loader: 'style-resources-loader',
                  options: {
                    patterns: path.resolve(__dirname, '../src/common.less'),
                  },
                },
              ],
            },

（3）src下创建common.less文件、创建变量

@bg-color: #000;

（4）页面使用

  background-color: @bg-color;

(5) 重新启动项目

项目使用总是会引入各种文件路径，各种层级关系，这个时候我们可以别名
1、打开配置文件config/webpack.config.js，全局搜索alias对象，添加下面属性，页面中src路径下课直接用@代替

 '@': path.resolve(__dirname, '../src'),
import Header from '@/components/header';