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，若是看到一個綠色的按鈕就說明配置成功了。