說(shuō)在前面

create-react-app是由 React 官方提供并推薦使用構(gòu)建新的 React 單頁(yè)面應(yīng)用程序的最佳方式，不過(guò)目前版本(1.5.x)其構(gòu)建的項(xiàng)目中默認(rèn)是不支持動(dòng)態(tài)樣式語(yǔ)言Less的。如果我們的項(xiàng)目必須要使用 Less 呢，這就需要我們手動(dòng)集成一下。本篇主要針對(duì)集成的過(guò)程做一個(gè)簡(jiǎn)要記錄。

環(huán)境準(zhǔn)備

本小節(jié)先用 create-react-app 構(gòu)建一個(gè)全新的 React 項(xiàng)目作為實(shí)驗(yàn)環(huán)境。

如果您之前未曾使用過(guò) create-react-app，請(qǐng)先通過(guò)如下命令全局安裝（假定您本機(jī)已經(jīng)安裝了 Node.js）：

  npm install -g create-react-app

然后，通過(guò)如下命令構(gòu)建一個(gè)新的項(xiàng)目my-app：

  npx create-react-app my-app

通過(guò)cd my-app命令進(jìn)入項(xiàng)目文件夾，執(zhí)行yarn start命令啟動(dòng)程序，成功運(yùn)行，則實(shí)驗(yàn)環(huán)境準(zhǔn)備完畢。

最終項(xiàng)目結(jié)構(gòu)：

  ┌─node_modules   ├─public  ├─src             ├─.gitignore  ├─package.json  ├─README.md  └─yarn.lock

安裝 less & less-loader

要使 create-react-app 構(gòu)建的項(xiàng)目能正常解析 less 文件，只需要讓webpack能夠把 less 文件編譯成 css 文件即可。

所以，首先要把 less 和less-loader(less 編譯器)添加到項(xiàng)目中：

  yarn add less less-loader

這樣就 OK 了？以上只是在項(xiàng)目中安裝了 less 和 less-loader ，但還未曾通過(guò) webpack 使用 less-loader。

至于怎么使用？幾種使用方式？請(qǐng)參見(jiàn)webpack 文檔，這里不再贅述。

假定您已經(jīng)仔細(xì)閱讀過(guò)上述 webpack 文檔，想必您也清楚我們應(yīng)該選擇在webpack.config.js文件中配置 less-loader。

暴露 webpack 配置文件

突然，您會(huì)發(fā)現(xiàn)在我們實(shí)驗(yàn)項(xiàng)目中找不到 webpack 相關(guān)配置文件。

因?yàn)槟_手架為了實(shí)現(xiàn)“零配置”，會(huì)默認(rèn)把一些通用的腳本和配置集成到react-scripts，目的是讓我們專注于src目錄下的開(kāi)發(fā)工作，不再操心環(huán)境配置。同時(shí)，被其集成的腳本和配置也會(huì)從程序目錄中消失 ，程序目錄也會(huì)變得干凈許多。

如果我們要自定義環(huán)境配置怎么辦？

項(xiàng)目構(gòu)建完成后，會(huì)提供一個(gè)命令yarn eject，通過(guò)這個(gè)命令，我們可以把被 react-scripts 集成的配置和腳本暴露出來(lái)。

以下是腳手架關(guān)于yarn eject命令的介紹：

yarn ejectRemoves this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

大概意思是，執(zhí)行該命令后會(huì)把已構(gòu)建依賴項(xiàng)、配置文件和腳本復(fù)制到程序目錄中。該操作是不可逆轉(zhuǎn)的，執(zhí)行完成后會(huì)刪除這個(gè)命令，也就是說(shuō)只能執(zhí)行一次。

至于 react-scripts 都集成了哪些東西，通過(guò)yarn eject命令的執(zhí)行記錄也能看出個(gè)大概：

  λ 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:Reactmy-app    Adding configenv.js to the project    Adding configpaths.js to the project    Adding configpolyfills.js to the project    Adding configwebpack.config.dev.js to the project    Adding configwebpack.config.prod.js to the project    Adding configwebpackDevServer.config.js to the project    Adding configjestcssTransform.js to the project    Adding configjestfileTransform.js to the project    Adding scriptsbuild.js to the project    Adding scriptsstart.js to the project    Adding scriptstest.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.

說(shuō)了這么多，現(xiàn)在怎樣才能在我們的項(xiàng)目中暴露 webpack 的配置文件？沒(méi)錯(cuò)，你沒(méi)猜錯(cuò)，只需要運(yùn)行一下yarn eject即可。

再來(lái)看我們的實(shí)驗(yàn)項(xiàng)目的目錄，您會(huì)發(fā)現(xiàn)其中多了一個(gè)config文件夾，其中就有三個(gè)關(guān)于 webpack 的配置文件：

  webpack.config.dev.js       # 開(kāi)發(fā)環(huán)境配置  webpack.config.prod.js      # 生產(chǎn)環(huán)境配置  webpackDevServer.config.js  # 開(kāi)發(fā)服務(wù)器配置

我們需要關(guān)注的是前兩個(gè)，最后一個(gè)是關(guān)于本地開(kāi)發(fā)服務(wù)器http://localhost:3000的一些相關(guān)配置。

修改 webpack 配置

理論上講，需要同步修改webpack.config.dev.js和webpack.config.prod.js配置文件：

在module.rules節(jié)點(diǎn)中找到 css 文件的加載規(guī)則：

test: /.css$/修改為test: /.(css|less)$/；在use數(shù)組最后新增一個(gè)對(duì)象元素{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 

至此，就已經(jīng)完成了create-react-app 對(duì) Less 的支持。

效果驗(yàn)證

最后，在我們的實(shí)驗(yàn)項(xiàng)目中驗(yàn)證一下配置是否生效。

首先在src根目錄下使用 Less 語(yǔ)法創(chuàng)建一個(gè) less 文件，取名為T(mén)est.less：

  @title-color:#f00;    .App-title {      color: @title-color    }

然后在App.js文件中通過(guò)如下API導(dǎo)入上述的 less 文件：

  import './Test.less';

再次yarn start運(yùn)行我們的程序，如果標(biāo)題Welcome to React變成紅色則說(shuō)明配置沒(méi)有問(wèn)題。