React安装及创建基础项目

1.npm安装react脚手架

cnpm install -g create-react-app

 2.创建新的项目

create-react-app reactApp

3.运行项目

npm start reactApp 

4.配置 react-router-dom

cnpm install react-router-dom --save-dev

5.配置 sass-loader、node-sass

cnpm install sass-loader node-sass --save-dev

5.1 在webpack.config.js中搜索file-loader更改

{
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            {
              test:/\.scss$/,
              loaders:['style-loader','css-loader','sass-loader']
            }

6.安装sass

npm i sass-loader --save-dev

7.安装resource依赖

 npm install sass-resources-loader -D

8.安装完成后，发现通过create-react-app下载的脚手架项目没有webpack.config，这时去node_module下找react-scripts/config/webpack.config.js即为该项目的webpack文件，找到exclude: sassModuleRegex,修改如下即可完成全局配置公用样式

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ).concat({
                loader:'sass-resources-loader',
                options:{
                  resources:[
                    // 按照文件路径填写
                    path.resolve(__dirname,'./src/styles/sassConfig.scss')
                  ]
                }
              }),

9.安装antd依赖，按需饮用

cnpm install antd --save

cnpm install babel-plugin-import --save-dev

10.配置webpack.config，搜索babel-loader，在plugins里添加如下内容

[
                    "import",
                    {libraryName:'antd',style:'css'}
                  ],