create-react-app中添加less支持的实现


Posted in Javascript onNovember 15, 2019

前言

使用 create-react-app 脚手架创建项目后,默认是不支持 less 的。所以我们需要手动添加。

第一步 暴露webpack配置文件

使用 create-react-app 创建的项目,默认情况下是看不到 webpack 相关的配置文件,我们需要给它暴露出来,使用下面命令即可:

npm run eject

运行之后,我们发现多了一个config文件夹

这样就可以修改 webpack 相关配置了。

第二步 添加less

在项目根目录 使用 npm 或者 yarn 来安装 less 和 less-loader,我这里使用的是 yarn

yarn add less less-loader

第三步 修改webpack配置文件

我们需求修改 webpack.config.dev.js 和 webpack.config-prod.js 这两个配置文件

  1. test: /.css$/ 改为 /\.(css|less)$/
  2. test: /.css$/ 的 use 数组配置增加 less-loader
{
 test: /\.(css|less)$/,
 use: [
 require.resolve('style-loader'),
 {
  loader: require.resolve('css-loader'),
  options: {
  importLoaders: 1,
  },
 },
 {
  loader: require.resolve('postcss-loader'),
  options: {
  // Necessary for external CSS imports to work
  // https://github.com/facebookincubator/create-react-app/issues/2677
  ident: 'postcss',
  plugins: () => [
   require('postcss-flexbugs-fixes'),
   autoprefixer({
   browsers: [
    '>1%',
    'last 4 versions',
    'Firefox ESR',
    'not ie < 9', // React doesn't support IE8 anyway
   ],
   flexbox: 'no-2009',
   }),
  ],
  },
 },
 {
  loader: require.resolve('less-loader') // compiles Less to CSS
 }
 ],
},

结束

重新运行项目,引入less,发现是不是可以使用了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 #Javascript
详解Angular Karma测试的持续集成实践
Nov 15 #Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 #Javascript
JavaScript定时器常见用法实例分析
Nov 15 #Javascript
解决Layui 表格自适应高度的问题
Nov 15 #Javascript
layui前端时间戳转化实例
Nov 15 #Javascript
JavaScript变量基本使用方法实例分析
Nov 15 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
用javascript操作xml
2006/11/04 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
跟我学习javascript的浮点数精度
2015/11/16 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Django设置Postgresql的操作
2020/05/14 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
电子商务个人自荐信
2013/12/12 职场文书
化工专业自荐书
2014/06/16 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
2014年质检工作总结
2014/11/26 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
MySQL里面的子查询的基本使用
2021/08/02 MySQL
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers