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 ...
随机推荐
- 在Python 中怎么表示一个元素在一个list中的数量?
commonest = [1,2,2,2,1,3,4,5,1,1] print(commonest.count(1))
- NI Vision 介绍
NI Vision主要包括三种主要软件包: 主程序包(Vision Acquisition Software), 视觉开发模块(Vision Development Module), 以及用于自动检测 ...
- python面向对象类的约束和设计的统一化规范
.封装 定义:将一些东西内容封存到一个地方,你还可以再取出, 类设置静态属性,设置一些方法 对象可以在其对象空间中封装一些属性 2.多态 定义:一个事物的多种形态 就想a可以是一个字符串,可以是一个列 ...
- VB.Net制作-历朝通俗演义
原先的回数,全是汉语数字,为此我先转换成了阿拉伯数字,遗憾的是阿拉伯数字100居然排在1和2之前!所以必须设置为3位数字才行!否则顺序是乱的. 以下是用VBA批量重命名的代码: Dim FSO As ...
- 简单说说PHP优化
我们在编写程序时,总是想要使自己的程序占用资源最小,运行速度更快,代码量更少.往往我们在追求这些的同时却失去了很多东西.下面我想讲讲我对PHP优化的理解.优化的目的是花最少的代价换来最快的运行速度与最 ...
- OpenCV Canny 边缘检测
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...
- Qt QImag图像保存、格式转换
图像保存bool QImage::save(const QString &fileName, const char *format = Q_NULLPTR, int quality = -1) ...
- Typescript - 联合类型
原文:TypeScript基本知识点整理 零.序言 联合类型表示一个变量值可以是几种类型之一,我们可以使用 “|” 来分割每个类型: 联合类型的变量在被赋值时,会根据类型推断的规则推断出一个类型: 如 ...
- drf分页组件补充
drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...
- unittest(9)- 使用ddt给测试用例传参
# 1. http_request.py import requests class HttpRequest: def http_request(self, url, method, data=Non ...