React脚手架使用less

晚生隆海

已于 2022-01-22 17:24:23 修改

阅读量713

点赞数

分类专栏： web前端 # JavaScript # CSS 文章标签： react.js less npm

于 2022-01-22 17:05:54 首次发布

本文链接：https://blog.youkuaiyun.com/thlchina/article/details/122640001

版权

web前端同时被 3 个专栏收录

38 篇文章

订阅专栏

JavaScript

29 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

本文介绍如何在React项目中配置Less预处理器，并利用Node Less Chokidar实现自动编译Less到Css。同时提供了VSCode下安装EasyLess及LiveSassCompiler插件的方法，以实现自动保存为Css文件的功能。

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

React脚手架使用less

React使用less编写样式
Vscode自动保存为css文件
- vscode安装easy less
- vscode安装Live Sass Compiler

React使用less编写样式

使用npm包：node-less-chokidar
npm官方文档
 github官方文档

安装npm包：

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

安装好保证package.json字段如下即可，会自动生成css文件：

"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"
}