您的位置 首页 css教程

如何在react中使用less

如何在react中使用less

在用create-react-app搭建react app的时候,原生并不支持less,只支持css。不过create-react-app官方给了一种方法使用less。

node-less-chokidar

主要利用了node-less-chokidar这个库。

1、首先导入node-less-chokidarnpm-run-all这两个库:

npm install node-less-chokidar --save-devnpm 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文件即可。

更多React相关技术文章,请访问React答疑栏目进行学习!

以上就是如何在react中使用less的详细内容,更多请关注火云技术网其它相关文章!

文章来源:火云技术网

文章标题:如何在react中使用less

文章地址:https://www.pyhw.net/16733_%e5%a6%82%e4%bd%95%e5%9c%a8react%e4%b8%ad%e4%bd%bf%e7%94%a8less.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图