create-react-app 引入ant design 及 使用 less

全局引入：

第一步：全局安裝 create-react-app

npm install create-react-app -g

第二步：安裝 yarn

npm install -g yarn

第三步：安裝 antd

yarn add antd

第四步：安裝 babel-plugin-import

npm install babel-plugin-import --save-dev

第五步：暴露配置項

npm run eject

發現執行此操作報錯了，不管他什么錯，接着執行

yarn install

然后執行

npm run eject

此時可以成功 .會自動生成一個config的文件夾,時候我們先配置dev模式

第五點一步：打開config文件夾下面的webpack.config.dev.js文件

添加一下代碼 (可要可不要)

plugins: ['transform-runtime', ['import', {
   libraryName: 'antd',
   style: 'css'
 }]]

但是當你執行npm start 的時候會發現不行 報錯了.
那么此時只要是再執行一次npm install 就可以 然后執行

npm start

項目就可以運行啦

第六步：引入css文件

import 'antd/dist/antd.css'

上邊的這種方法是引入全部的antd組件及樣式，這對前端來說是很不友好的，所以應該改變為按需引入

按需引入（前提是上邊全局安裝的步驟都已經完成，且能正常運行項目）：

第一步：引入 react-app-rewired 並修改 package.json 里的啟動配置。由於新的 react-app-rewired@2.x 版本的關系，你還需要安裝 customize-cra。

yarn add react-app-rewired customize-cra

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

第二步：按需加載組件代碼和樣式的 babel 插件

yarn add babel-plugin-import

第三步：然后在項目根目錄創建一個 config-overrides.js 用於修改默認配置

// config-overrides.js  
const { override, fixBabelImports } = require('customize-cra');

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
 );

第四步：將之前文件中寫的 import 'antd/dist/antd.css' 刪掉

第五步：執行命令 npm start

我的項目中啟動后報如下錯誤：

npm提示，react-scripts peer依賴未安裝，然而在npm3.0版之后，peer依賴已經不再寫入package.json中了

所以，將 react-scripts添加到dev依賴中

執行以下命令：

 yarn add react-scripts --dev

然后重新運行項目就 OK 啦

 less的使用

第一步：安裝 less 及 less-loader

yarn add less less-loader --save-dev

第二步：更改 config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
 }),
);

這里利用了 less-loader 的 modifyVars 來進行主題配置，變量和其他配置方式可以參考 配置主題 文檔。

修改后重啟 yarn start，如果看到一個綠色的按鈕就說明配置成功了。