react学习笔记(八)---react项目搭建以及配置

1、创建react + typescript项目

create-react-app project --template typescript

2、配置react的基础配置

安装craco依赖

因为react模板中webpack中的配置是隐藏的，虽然可以使用命令让指定的配置显示出来，但是会增加阅读和更改的难度，所以建议使用craco来更改

# 安装 craco

npm install @craco/craco -D

 添加craco.config.js配置

const path = require('path');
const CracoLessPlugin = require('craco-less');

const resolve = (folderPath) => path.resolve(__dirname, folderPath);

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      // 如果只是希望less生效，那么可以不要以下配置
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // 这个是在配置ant时，对变量进行覆盖，如果常规开发时，可以把这个提取到外部文件中，用@import引入
            modifyVars: {
              '@primary-color': '#1DA57A',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],

  webpack: {
    // 配置别名
    alias: {
      '@app': resolve('src'),
    },
  },
};

如果需要配置scss或者其他的配置，可以参考网站  https://craco.js.org/docs/configuration/style/#stylesassloaderoptions

重置css 可以使用normalize.css， reset.css