React官方脚手架不支持less问题解决
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 文件的加载规则:
test: /\.css$/
修改为test: /\.(css|less)$/
;- 在
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问题解决的更多相关文章
- 如何解决 React 官方脚手架不支持 Less 的问题
说在前面 create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Les ...
- React 官方脚手架 create-react-app快速生成新项目
进入新公司已经半年了,各个业务线,技术栈都已经熟悉,工作也已经游刃有余,决定慢下脚步,沉淀积累,回顾一下所用技术栈所包含的基本知识,以及再公司中的实战. 首先回顾新项目搭建 react脚手架目前使用较 ...
- react官方脚手架搭建项目
1.全局安装 npm install -g create-react-app 2. app后面还要给项目文件命名 create-react-app //是全局命令来创建react项目 3.然后按照提示 ...
- 关于react 官方脚手架使用出现的问题
首先按照官网说明,一路的安装下来,很顺利,然后开始运行吧,提示个错误,缺少index.js 文件 原来是默认给出的文件是App.js 如何更改呢 找到react-script模块文件夹config下 ...
- react官方脚手架添加less配置
装两个包 npm install --save less less-loader 在node-modules/react-scripts/config/webpack.config.js中 在大概58 ...
- 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 ...
- 自制的React同构脚手架
代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...
- 关于React的脚手架
Rewire你的应用 https://ant.design/docs/react/use-with-create-react-app-cn create-react-app (官方脚手架 简称cra) ...
- 自己实现一个自定义React项目脚手架「ReactCli」
前言 首先为什么想到自己实现一个React脚手架呢?是因为之前刚接触create-react-app时,觉得不太灵活.虽然文件目录很清晰,但是还是觉得不如VueCLI的可以自定义配置更加灵活.当然Re ...
随机推荐
- android 9.0 http无法访问问题
在res/xml下新建network-security-config.xml <?xml version="1.0" encoding="utf-8"?& ...
- 非线程安全的HashMap 和 线程安全的ConcurrentHashMap
在平时开发中,我们经常采用HashMap来作为本地缓存的一种实现方式,将一些如系统变量等数据量比较少的参数保存在HashMap中,并将其作为单例类的一个属性.在系统运行中,使用到这些缓存数据,都可以直 ...
- 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 ...
- android cpu affinity
暂时无法获取当前线程运行在哪个CPU上,待调查... int omask = 0; int nmask = 0xF0; static void affinity() { int err; int sy ...
- GBDT的理解和总结
2015/11/21 16:29:29 by guhaohit 导语: GBDT是非常有用的机器学习的其中一个算法,目前广泛应用于各个领域中(regression,classification,ran ...
- 吴裕雄--天生自然python学习笔记:WEB数据抓取与分析
Web 数据抓取技术具有非常巨大的应用需求及价值, 用 Python 在网页上收集数据,不仅抓取数据的操作简单, 而且其数据分析功能也十分强大. 通过 Python 的时lib 组件中的 urlpar ...
- webstrom IDE 正则替换
ide:webstrom 其他IDE,可以自行测试. 目的. 将excel的table两列(一般是中文名,英文名,改为Javascript 对象) 从 场所内网IP地址 IP_ADDRESS 源外网I ...
- oracle存储过程随笔
有时间要把最近总结的存储过程的问题总结一下,先占坑: create or replace procedure test_proc2 as cursor cur is select YWR,YWRZJH ...
- python3爬虫:利用urllib与有道翻译获得翻译结果
在实现这一功能时遇到了一些困难,由于按照<零基础入门python>中的代码无法实现翻译,会爆出“您的请求来源非法,商业用途使用请关注有道翻译API官方网站“有道智云”: http://ai ...
- 为何印度打车软件Ola,也难逃“资本合并”命运?
从全球市场来看,共享经济已经引发了多场具有颠覆性的风暴.尤其是在与大众关系紧密的衣食住行方面,诞生了具有强势影响力的独角兽企业.如,共享打车企业Uber.共享房屋出租企业Airbnb等.而鉴于每个国家 ...