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

最新推荐文章于 2023-08-08 15:00:57 发布

weixin_30252709

最新推荐文章于 2023-08-08 15:00:57 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/yangzhou33/p/9625976.html

本文介绍如何在create-react-app创建的React项目中引入LESS预处理器，通过安装node-less-chokidar和npm-run-all库，并修改package.json文件实现LESS的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

在用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文件即可。

转载于:https://www.cnblogs.com/yangzhou33/p/9625976.html