概述

在用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这两个库:

  1. npm install node-less-chokidar --save-dev
  2. npm install npm-run-all --save-dev

然后修改package.json:

  1. "scripts": {
  2. "start": "npm run build-css && run-p -ncr watch-css start-js",
  3. "start-js": "react-scripts start",
  4. "build": "run-s -n build-css build-js",
  5. "build-js": "react-scripts build",
  6. "test": "run-s -n build-css test-js",
  7. "test-js": "react-scripts test --env=jsdom",
  8. "build-css": "node-less-chokidar src",
  9. "watch-css": "node-less-chokidar src --watch"
  10. },
  11. "devDependencies": {
  12. "node-less-chokidar": "^0.3.0",
  13. "npm-run-all": "^4.1.3"
  14. }

最后运行npm start命令即可。

注意:这个库的原理是,在执行create-react-app之前,就把less编译成css并放在less所在的文件夹里面。所以,项目中js里面引用css的语句不用改成less,只需要把.css文件改成.less文件即可。

在react中使用less(官方做法)的更多相关文章

  1. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  2. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  3. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  4. React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...

  5. React 中的this.setState

    在react中如何修改state中的数据     第一种写法:this.setState()         参数1:对象 需要修改的数据         参数2:回调 this.setState是一 ...

  6. react中这些细节你注意过没有?

    react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...

  7. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  8. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  9. React中的虚拟DOM

    当组件当state和props发生变化当时候,组件当render函数就会重新执行,组件就会被重新渲染,react中实现这种重新渲染,他的性能是非常高的,因为他引入了一个虚拟Dom的概念,那么什么是虚拟 ...

  10. Immutable学习及 React 中的实践

    为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原 ...

随机推荐

  1. scrapy Mongodb 储存

    pipelines.py # -*- coding: utf-8 -*- # Define your item pipelines here # # Don't forget to add your ...

  2. [基础篇] 01_MySQL的安装与配置

  3. mysql约束以及数据库的修改

    一.约束 1.约束保证数据完整性和一致性. 2.约束分为表级约束和列级约束. (1)表级约束(约束针对于两个或两个以上的字段使用) (2)列级约束(针对于一个字段使用) 3.约束类型有: (1)NOT ...

  4. rest接口webservice接口利用http请求方式发送数据

    所需依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>h ...

  5. mysql too many connection 解决

    最近的项目用了动态切换数据源起初感觉还好,后来发现每次切换数据库都会创建一个新的连接,这样就导致大量的sleep线程.而mysql的默认sleep时间是28800秒....默认最大连接数为151,这就 ...

  6. Sqlite3数据库查看工具

    SQLiteSpy     小巧便捷,免安装,占空间小. 推荐 http://www.softpedia.com/get/Internet/Servers/Database-Utils/SQLiteS ...

  7. win10与虚拟机fedora14使用samba文件共享

    参考路径:http://blog.sina.com.cn/s/blog_ae9507be01017tyz.html 最近需要配置samba,试了好多次,终于搞定.奉上配置及共享文件的过程,以供参考. ...

  8. Java-常用工具方法

    一 Json转换 1 输出组装好的json ObjectMapper mapper = new ObjectMapper(); try { String requiredJson = mapper.w ...

  9. c#串口测试

    软件和代码网盘下载 https://pan.baidu.com/s/1dFrE1pv#list/path=%2F SerialPort 类 https://msdn.microsoft.com/zh- ...

  10. thinkphp 5 使用oss

    简单的tp5中上传到 图片到oss我本地开发环境为:WAMP;php版本:5.6.19TP版本:5.1.13 1.使用composer 安装 composer require aliyuncs/oss ...