在react中使用less（官方作法）

概述

在用create-react-app搭建react app的時候，原生並不支持less，只支持css。不過create-react-app官方給了一種方法使用less，我以爲頗有用，記錄下來，供之後開發時參考，相信對其餘人也有用。

參考資料：
Adding a CSS Preprocessor (Sass, Less etc.)

node-less-chokidar

主要利用了node-less-chokidar這個庫。

首先導入node-less-chokidar和npm-run-all這兩個庫：

npm install node-less-chokidar --save-dev
npm install npm-run-all --save-dev

而後修改package.json：

"scripts": {
    "start": "npm run build-css && run-p -ncr watch-css start-js",
    "start-js": "react-scripts start",
 
    "build": "run-s -n build-css build-js",
    "build-js": "react-scripts build",
 
    "test": "run-s -n build-css test-js",
    "test-js": "react-scripts test --env=jsdom",
 
    "build-css": "node-less-chokidar src",
    "watch-css": "node-less-chokidar src --watch"
},
"devDependencies": {
    "node-less-chokidar": "^0.3.0",
    "npm-run-all": "^4.1.3"
}

最後運行npm start命令便可。

注意：這個庫的原理是，在執行create-react-app以前，就把less編譯成css並放在less所在的文件夾裏面。因此，項目中js裏面引用css的語句不用改爲less，只須要把.css文件改爲.less文件便可。