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编程起步(第七课)
Jan 10 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
JavaScript实现两个数组的交集
Mar 25 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/03 咖啡文化
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php二维数组转成字符串示例
2014/02/17 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
中止javascript执行的方法
2014/02/14 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Python isinstance判断对象类型
2008/09/06 Python
python 中的列表解析和生成表达式
2011/03/10 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python Socket编程详细介绍
2017/03/23 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Django 路由系统URLconf的使用
2018/10/11 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
竞选大队干部演讲稿
2014/09/11 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
创业计划书之烤红薯
2019/09/26 职场文书