像学vue一样学习react，系列一（创建react项目）

1、利用create-react-app创建项目

• 安装

npm i create-react-app -g

• 查看版本

create-react-app -V, 我本地是4.0.3

2、安装scss环境

这里分旧版本和新版本，这里就介绍新版本用法 npm i sass-loader node-sass -D 装完之后直接使用scss语法就行了

3、webpack配置

vue里面有个vue.config.js配置webpack文件；当然,react也有

方法一 react-script eject

//package.json
"eject": "react-scripts eject"

• 暴露webpack配置文件，npm run eject
• 实测暴露后配置文件内容太多了，我懒得看，就没用这种方法

方法二,安装 react-app-rewired, customize-cra

安装 npm i react-app-rewired customize-cra -D 在根目录下新建config-overrides.js, 相当于vue.config.js 下面配置了个别名alias例子

/* config-overrides.js */
const path = require('path')
const { override, addWebpackAlias} = require('customize-cra')

/* config-overrides.js */
module.exports = override(
  // 设置别名路径
  addWebpackAlias({ //路径别名
    '@': path.resolve(__dirname, 'src'),
  })
)

修改package.json

//package.json
"scripts": {
  "start": "set BROWSER=none&&react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-scripts eject"
},

4、 全局引入公共scss文件

安装npm i sass-resources-loader -D config.overrides.js配置

/* config-overrides.js */
const path = require('path')
const { override, addWebpackAlias, adjustStyleLoaders } = require('customize-cra')

/* config-overrides.js */
module.exports = override(
  // 设置别名路径
  addWebpackAlias({ //路径别名
    '@': path.resolve(__dirname, 'src'),
  }),
  // ...其他配置...
  adjustStyleLoaders(rule => {
    if (rule.test.toString().includes("scss")) {
      rule.use.push({
        loader: require.resolve("sass-resources-loader"),
        options: {
          resources: "./src/assets/scss/global.scss" //这里是你自己放公共scss变量的路径
        }
      });
    }
  })
)