如何解決 React 官方腳手架不支援 Less 的問題
說在前面
create-react-app 是由 React 官方提供並推薦使用構建新的 React 單頁面應用程式的最佳方式，不過目前版本(1.5.x)其構建的專案中預設是不支援動態樣式語言 Less 的。如果我們的專案必須要使用 Less 呢，這就需要我們手動整合一下。本篇主要針對整合的過程做一個簡要記錄。
環境準備
本小節先用 create-react-app 構建一個全新的 React 專案作為實驗環境。
如果您之前未曾使用過 create-react-app，請先通過如下命令全域性安裝（假定您本機已經安裝了 Node.js）：
npm install -g create-react-app
然後，通過如下命令構建一個新的專案my-app：
npx create-react-app my-app通過cd my-app命令進入專案資料夾，執行yarn start命令啟動程式，成功執行，則實驗環境準備完畢。
最終專案結構：
├─ node_modules
├─ public
├─ src
├─ .gitignore
├─ package.json
├─ README.md
└─ yarn.lock安裝 less & less-loader
要使 create-react-app 構建的專案能正常解析 less 檔案，只需要讓 webpack 能夠把 less 檔案編譯成 css 檔案即可。
所以，首先要把 less 和 less-loader (less 編譯器)新增到專案中：
yarn add less less-loader這樣就 OK 了？以上只是在專案中安裝了 less 和 less-loader ，但還未曾通過 webpack 使用 less-loader。
至於怎麼使用？幾種使用方式？請參見 webpack 文件 ，這裡不再贅述。
假定您已經仔細閱讀過上述 webpack 文件，想必您也清楚我們應該選擇在webpack.config.js檔案中配置 less-loader。
暴露 webpack 配置檔案
突然，您會發現在我們實驗專案中找不到 webpack 相關配置檔案。
因為腳手架為了實現“零配置”，會預設把一些通用的指令碼和配置整合到 react-scripts，目的是讓我們專注於src目錄下的開發工作，不再操心環境配置。同時，被其整合的指令碼和配置也會從程式目錄中消失 ，程式目錄也會變得乾淨許多。
如果我們要自定義環境配置怎麼辦？
專案構建完成後，會提供一個命令yarn eject，通過這個命令，我們可以把被 react-scripts 整合的配置和指令碼暴露出來。
以下是腳手架關於yarn eject命令的介紹：
yarn eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
大概意思是，執行該命令後會把已構建依賴項、配置檔案和指令碼複製到程式目錄中。該操作是不可逆轉的，執行完成後會刪除這個命令，也就是說只能執行一次。
至於 react-scripts 都集成了哪些東西，通過yarn eject命令的執行記錄也能看出個大概：
λ yarn eject
yarn run v1.6.0
$ react-scripts eject
? Are you sure you want to eject? This action is permanent. Yes
Ejecting...
Copying files into E:\React\my-app
Adding \config\env.js to the project
Adding \config\paths.js to the project
Adding \config\polyfills.js to the project
Adding \config\webpack.config.dev.js to the project
Adding \config\webpack.config.prod.js to the project
Adding \config\webpackDevServer.config.js to the project
Adding \config\jest\cssTransform.js to the project
Adding \config\jest\fileTransform.js to the project
Adding \scripts\build.js to the project
Adding \scripts\start.js to the project
Adding \scripts\test.js to the project
Updating the dependencies
Removing react-scripts from dependencies
Adding autoprefixer to dependencies
Adding babel-core to dependencies
Adding babel-eslint to dependencies
Adding babel-jest to dependencies
Adding babel-loader to dependencies
Adding babel-preset-react-app to dependencies
Adding babel-runtime to dependencies
Adding case-sensitive-paths-webpack-plugin to dependencies
Adding chalk to dependencies
Adding css-loader to dependencies
Adding dotenv to dependencies
Adding dotenv-expand to dependencies
Adding eslint to dependencies
Adding eslint-config-react-app to dependencies
Adding eslint-loader to dependencies
Adding eslint-plugin-flowtype to dependencies
Adding eslint-plugin-import to dependencies
Adding eslint-plugin-jsx-a11y to dependencies
Adding eslint-plugin-react to dependencies
Adding extract-text-webpack-plugin to dependencies
Adding file-loader to dependencies
Adding fs-extra to dependencies
Adding html-webpack-plugin to dependencies
Adding jest to dependencies
Adding object-assign to dependencies
Adding postcss-flexbugs-fixes to dependencies
Adding postcss-loader to dependencies
Adding promise to dependencies
Adding raf to dependencies
Adding react-dev-utils to dependencies
Adding resolve to dependencies
Adding style-loader to dependencies
Adding sw-precache-webpack-plugin to dependencies
Adding url-loader to dependencies
Adding webpack to dependencies
Adding webpack-dev-server to dependencies
Adding webpack-manifest-plugin to dependencies
Adding whatwg-fetch to dependencies
Updating the scripts
Replacing "react-scripts start" with "node scripts/start.js"
Replacing "react-scripts build" with "node scripts/build.js"
Replacing "react-scripts test" with "node scripts/test.js"
Configuring package.json
Adding Jest configuration
Adding Babel preset
Adding ESLint configuration
Ejected successfully!
Please consider sharing why you ejected in this survey:
http://goo.gl/forms/Bi6CZjk1EqsdelXk1
Done in 5.37s.說了這麼多，現在怎樣才能在我們的專案中暴露 webpack 的配置檔案？沒錯，你沒猜錯，只需要執行一下yarn eject即可。
再來看我們的實驗專案的目錄，您會發現其中多了一個config資料夾，其中就有三個關於 webpack 的配置檔案：
webpack.config.dev.js # 開發環境配置
webpack.config.prod.js # 生產環境配置
webpackDevServer.config.js # 開發伺服器配置我們需要關注的是前兩個，最後一個是關於本地開發伺服器http://localhost:3000的一些相關配置。
修改 webpack 配置
理論上講，需要同步修改 webpack.config.dev.js 和 webpack.config.prod.js 配置檔案：
在module.rules節點中找到 css 檔案的載入規則：
test: /\.css$/修改為test: /\.(css|less)$/；- 在
use陣列最後新增一個物件元素{loader: require.resolve('less-loader')}。
修改完成後：
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader')
}
],
},至此，就已經完成了 create-react-app 對 Less 的支援。
效果驗證
最後，在我們的實驗專案中驗證一下配置是否生效。
首先在src根目錄下使用 Less 語法建立一個 less 檔案，取名為Test.less：
@title-color:#f00;
.App-title {
color: @title-color
}然後在App.js檔案中通過如下API匯入上述的 less 檔案：
import './Test.less';再次yarn start執行我們的程式，如果標題Welcome to React變成紅色則說明配置沒有問題。
