在用 create-react-App 搭建 react App 的时候, 原生并不支持 Less, 只支持 CSS. 不过 create-react-App 官方给了一种方法使用 Less.
node-Less-chokidar
主要利用了 node-Less-chokidar 这个库.
1, 首先导入 node-Less-chokidar 和 NPM-run-all 这两个库:
- NPM install node-Less-chokidar --save-dev
- NPM install NPM-run-all --save-dev
2, 然后修改 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"
- }
3, 最后运行 NPM start 命令即可.
注意: 这个库的原理是, 在执行 create-react-App 之前, 就把 Less 编译成 CSS 并放在 Less 所在的文件夹里面. 所以, 项目中 JS 里面引用 CSS 的语句不用改成 Less, 只需要把. CSS 文件改成. Less 文件即可.
来源: http://www.css88.com/qa/react/14467.html