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

npm run eject

2.添加less

npm install less less-loader --save-dev

3.修改webpack配置文件 (修改下面两段代码即可)

const cssRegex = /\.(css|less)$/;

const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
loader: require.resolve('less-loader'),// compiles Less to CSS
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
}
return loaders;
};

  

React 如何适用less的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. Reactive MySQL Client

    Reactive MySQL Client是MySQL的客户端,具有直观的API,侧重于可伸缩性和低开销. 特征 事件驱动 轻量级 内置连接池 准备好的查询缓存 游标支持 行流 RxJava 1和Rx ...

  2. English--consonant_摩擦音

    consonant_摩擦音_[f]和[v].[s]和[z].[∫]和[ʒ] 摩擦音:理论上可以无限延长气流. [f]:噘嘴,上牙咬住下唇,送气,通过气流摩擦发音,声带不震动.knife.food.le ...

  3. JAVA - Windows下JDK自动设置脚本

    CMD窗口如果使用下面脚本代码出现乱码,则按照下文处理后,就可以了: https://www.cnblogs.com/sunylat/p/11308037.html @echo off echo ** ...

  4. Android 创建工程

    安卓系统占有率 创建 Application name:程序的名称,一般会出现在应用程序的标题栏 Project name:一个项目的名称,实际对应一个文件夹 Pakcage name:此名理论上可以 ...

  5. 关于控制Broker端入站连接数的讨论

    Kafka Broker端处理请求采用Reactor模型.每台Broker上有个类似于Dispatcher的Acceptor线程,还有若干个处理请求的Processor线程(当然真正处理请求逻辑的线程 ...

  6. 第一册: lesson 129。

    原文: Seventy miles an hour. question: What does Ann advise her husband to do next time? Look,Gary! Th ...

  7. 关于logging模块

    from logging.handlers import TimedRotatingFileHandle #日志文件控制(日志删除时间设置) import logging logger=logging ...

  8. Odoo模型的内置方法(可按需重写)

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826222.html ==========模型层面========== 一:_table_exist 检查 ...

  9. Odoo CRM模块

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10825983.html  一:理解CRM CRM:客户关系管理,是指企业用CRM技术来管理与客户之间的关系. ...

  10. 基于python3环境使用bandersnatch搭建本地pypi源

     pip3 install bandersnatch # https://pypi.org/project/bandersnatch/#files 查询最新版本 wget https://files. ...