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 相关文章推荐
jQuery写fadeTo示例代码
Feb 21 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
js中document.write的那点事
Dec 12 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PDO::prepare讲解
2019/01/29 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
pycharm安装图文教程
2017/05/02 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python map比for循环快在哪
2020/09/21 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
物流仓储计划书
2014/01/10 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
2014年减负工作总结
2014/12/10 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
民事诉讼代理词
2015/05/25 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python