如何解決 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 文件的加載規則：

1. test: /\.css$/ 修改成 test: /\.(css|less)$/；
2. 在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變成紅色則說明配置沒有問題。