create-react-app是由React官方提供,并推荐构建React单页应用程序的最佳方法,但是默认不支持less,需要手动集成:

1,必须手动安装less

npm install less less-loader

2,暴露webpack配置文件【npm run eject】,修改weppack.config.js文件中,添加less配置

在module.rules节点中找到 css 文件的加载规则:

  1. test: /\.css$/ 修改为 test: /\.(css|less)$/
  2. use数组最后新增一个对象元素{loader: require.resolve('less-loader')}

修改完成后:

const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
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,
}),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
});
}
return loaders;
};

需要重新启动项目,即可看到less样式可用!

【完】

新年flag3——每个月读两本书,微信读书打卡或者宅机kindle打卡

React官方脚手架不支持less问题解决的更多相关文章

  1. 如何解决 React 官方脚手架不支持 Less 的问题

    说在前面 create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Les ...

  2. React 官方脚手架 create-react-app快速生成新项目

    进入新公司已经半年了,各个业务线,技术栈都已经熟悉,工作也已经游刃有余,决定慢下脚步,沉淀积累,回顾一下所用技术栈所包含的基本知识,以及再公司中的实战. 首先回顾新项目搭建 react脚手架目前使用较 ...

  3. react官方脚手架搭建项目

    1.全局安装 npm install -g create-react-app 2. app后面还要给项目文件命名 create-react-app //是全局命令来创建react项目 3.然后按照提示 ...

  4. 关于react 官方脚手架使用出现的问题

    首先按照官网说明,一路的安装下来,很顺利,然后开始运行吧,提示个错误,缺少index.js 文件  原来是默认给出的文件是App.js 如何更改呢 找到react-script模块文件夹config下 ...

  5. react官方脚手架添加less配置

    装两个包 npm install --save less less-loader 在node-modules/react-scripts/config/webpack.config.js中 在大概58 ...

  6. React/VUE 脚手架2.0和3.0

    react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...

  7. 自制的React同构脚手架

    代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...

  8. 关于React的脚手架

    Rewire你的应用 https://ant.design/docs/react/use-with-create-react-app-cn create-react-app (官方脚手架 简称cra) ...

  9. 自己实现一个自定义React项目脚手架「ReactCli」

    前言 首先为什么想到自己实现一个React脚手架呢?是因为之前刚接触create-react-app时,觉得不太灵活.虽然文件目录很清晰,但是还是觉得不如VueCLI的可以自定义配置更加灵活.当然Re ...

随机推荐

  1. android 9.0 http无法访问问题

    在res/xml下新建network-security-config.xml <?xml version="1.0" encoding="utf-8"?& ...

  2. 非线程安全的HashMap 和 线程安全的ConcurrentHashMap

    在平时开发中,我们经常采用HashMap来作为本地缓存的一种实现方式,将一些如系统变量等数据量比较少的参数保存在HashMap中,并将其作为单例类的一个属性.在系统运行中,使用到这些缓存数据,都可以直 ...

  3. uname|mv|tar -xzvf|

    $ ls CAFE-4.2.1.tar.gz mcl-latest.tar.gz mysql-5.4.3-beta-linux-i686-glibc23.tar.gz.1 orthomclSoftwa ...

  4. android cpu affinity

    暂时无法获取当前线程运行在哪个CPU上,待调查... int omask = 0; int nmask = 0xF0; static void affinity() { int err; int sy ...

  5. GBDT的理解和总结

    2015/11/21 16:29:29 by guhaohit 导语: GBDT是非常有用的机器学习的其中一个算法,目前广泛应用于各个领域中(regression,classification,ran ...

  6. 吴裕雄--天生自然python学习笔记:WEB数据抓取与分析

    Web 数据抓取技术具有非常巨大的应用需求及价值, 用 Python 在网页上收集数据,不仅抓取数据的操作简单, 而且其数据分析功能也十分强大. 通过 Python 的时lib 组件中的 urlpar ...

  7. webstrom IDE 正则替换

    ide:webstrom 其他IDE,可以自行测试. 目的. 将excel的table两列(一般是中文名,英文名,改为Javascript 对象) 从 场所内网IP地址 IP_ADDRESS 源外网I ...

  8. oracle存储过程随笔

    有时间要把最近总结的存储过程的问题总结一下,先占坑: create or replace procedure test_proc2 as cursor cur is select YWR,YWRZJH ...

  9. python3爬虫:利用urllib与有道翻译获得翻译结果

    在实现这一功能时遇到了一些困难,由于按照<零基础入门python>中的代码无法实现翻译,会爆出“您的请求来源非法,商业用途使用请关注有道翻译API官方网站“有道智云”: http://ai ...

  10. 为何印度打车软件Ola,也难逃“资本合并”命运?

    从全球市场来看,共享经济已经引发了多场具有颠覆性的风暴.尤其是在与大众关系紧密的衣食住行方面,诞生了具有强势影响力的独角兽企业.如,共享打车企业Uber.共享房屋出租企业Airbnb等.而鉴于每个国家 ...