React 基础笔记(React 安装 Antd)(二十二)

安装 React(一)

本篇是基于 React16.9 中的配置

查看 npm 镜像源

npm config get registry

修改成淘宝镜像源

npm config set registry https://registry.npm.taobao.org

create-react-app

npx create-react-app 名称

启动

cd 名称

npm run start

安装 antd(二)

(1) 运行 git 命令

git init

git add .

git commit -m "before ejecting"

(2)敲命令打开 webpack 配置

• 命令运行完以后项目会多出很多文件

npm run eject

(3)安装包依赖

• 这里特别注意的就是只能安装 2.7.3 版本

yarn add  less-loader babel-plugin-import -D

yarn add less@2.7.3 -D

yarn add antd -S

(4) 修改 webpack.config.js 文件

• 第一步

const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
//增加的代码
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
//增加结束
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/

• 第二步修改 loader 依赖,增加 less 依赖

{
    test: cssModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent
    })
},
   //增加的代码
  // Opt-in support for SASS (using .scss or .sass extensions).
  // By default we support SASS Modules with the
  // extensions .module.scss or .module.sass
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap
      },
      'less-loader'
    ),

    sideEffects: true
  },
  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent
      },
      'less-loader'
    )
  },
  //增加结束

• 第三步修改 package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }
      ]
    ]
  }

• 第四部修改 getStyleLoaders 方法

if (preProcessor) {
  if (preProcessor === 'less-loader') {
    loaders.push({
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: isEnvProduction && shouldUseSourceMap,
        lessOptions: {
          // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    })
  } else {
    loaders.push(
      {
        loader: require.resolve('resolve-url-loader'),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
      {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true,
        },
      }
    )
  }
}
return loaders

这样就彻底完成了

使用 scss

• scss 或者 sass

yarn add node-sass sass-loader -D

然后就直接使用即可