React中less无法使用,less如何配置(暴力简单)
作者:互联网
首先大家明白一点React中默认是配置Sass的,所以想要配置Less的话看下面:
1.有一些第三方的框架会默认配置less 例如:
a:umi.js (蚂蚁金服前端框架)按照该框架官方文档引入即可
2.手动配置Less即可
a.首先先创建一个初始的React-app。此时,就算import less也无法应用,因为React提供的脚手架为creact-react-app默认配置sass。
b.接下来,就是固定的npm安装less
npm install less less-loader --save
c.在创建好的项目文件夹中找到 package-lock.json 文件进入,Ctrl+f后输入eject找到该行代码
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
d.运行eject,中间可能会需要输入y去确定其他配置,可直接一y到底
npm eject||yarn eject
e.此时,项目列表下的config文件夹中可以找到 webpack.config.js 这个文件,打开进入
f.Ctrl+f查找输入sassregex找到该行,并连同下一行一起复制
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//紧靠其后添加两行代码
const lessRegex=/\.less$/;
const lessModuleRegex = /\.module\.less$/;
//只是将sass修改为less
g.继续找下一处sassRegex和sassModuleRegex
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-loader'
),
sideEffects: true,
},
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
将这两段代码复制,并且都将sass修改为less即可,为防止大家在修改过程中因为括号和标点出错,将源码贴到下面:
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-loader'
),
sideEffects: true,
},
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
//以上为文件原有sass配置代码,下面为添加的less配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
接下来就能够创建后缀为.less的文件并编辑样式了,大家可以覆盖调之前的css文件代替为less试一试是否成功,大家有问题可以评论区提问,或者本人解释错误的请提出来,谢谢
标签:暴力,sass,less,isEnvDevelopment,loader,React,sourceMap,test 来源: https://blog.csdn.net/TYUT_LiXiaoYao/article/details/115461532