在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文件即可。
在react中使用less(官方做法)的更多相关文章
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- React中的路由系统
React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...
- React 中的this.setState
在react中如何修改state中的数据 第一种写法:this.setState() 参数1:对象 需要修改的数据 参数2:回调 this.setState是一 ...
- react中这些细节你注意过没有?
react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- React中的虚拟DOM
当组件当state和props发生变化当时候,组件当render函数就会重新执行,组件就会被重新渲染,react中实现这种重新渲染,他的性能是非常高的,因为他引入了一个虚拟Dom的概念,那么什么是虚拟 ...
- Immutable学习及 React 中的实践
为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原 ...
随机推荐
- scrapy Mongodb 储存
pipelines.py # -*- coding: utf-8 -*- # Define your item pipelines here # # Don't forget to add your ...
- [基础篇] 01_MySQL的安装与配置
- mysql约束以及数据库的修改
一.约束 1.约束保证数据完整性和一致性. 2.约束分为表级约束和列级约束. (1)表级约束(约束针对于两个或两个以上的字段使用) (2)列级约束(针对于一个字段使用) 3.约束类型有: (1)NOT ...
- rest接口webservice接口利用http请求方式发送数据
所需依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>h ...
- mysql too many connection 解决
最近的项目用了动态切换数据源起初感觉还好,后来发现每次切换数据库都会创建一个新的连接,这样就导致大量的sleep线程.而mysql的默认sleep时间是28800秒....默认最大连接数为151,这就 ...
- Sqlite3数据库查看工具
SQLiteSpy 小巧便捷,免安装,占空间小. 推荐 http://www.softpedia.com/get/Internet/Servers/Database-Utils/SQLiteS ...
- win10与虚拟机fedora14使用samba文件共享
参考路径:http://blog.sina.com.cn/s/blog_ae9507be01017tyz.html 最近需要配置samba,试了好多次,终于搞定.奉上配置及共享文件的过程,以供参考. ...
- Java-常用工具方法
一 Json转换 1 输出组装好的json ObjectMapper mapper = new ObjectMapper(); try { String requiredJson = mapper.w ...
- c#串口测试
软件和代码网盘下载 https://pan.baidu.com/s/1dFrE1pv#list/path=%2F SerialPort 类 https://msdn.microsoft.com/zh- ...
- thinkphp 5 使用oss
简单的tp5中上传到 图片到oss我本地开发环境为:WAMP;php版本:5.6.19TP版本:5.1.13 1.使用composer 安装 composer require aliyuncs/oss ...