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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
js制作支付倒计时页面
Oct 21 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python使用mysql的两种使用方式
2018/03/07 Python
python实现泊松图像融合
2018/07/26 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
基于python实现对文件进行切分行
2020/04/26 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
资深生产主管自我评价
2013/09/22 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
企业出纳岗位职责
2014/03/12 职场文书
教师工作总结范文2014
2014/11/10 职场文书
干部培训简讯
2015/07/20 职场文书