create-react-app 创建React 默认不支持less 且webpack配置默认不可见需要手动配置

第一步：打开下载webpack React项目配置文件

注意：必须是全新的项目或者已经提交的项目
运行完成后项目根目录会增加 config 和 scripts目录

npm run eject

第二步：安装less解析依赖

npm i less less-loader --save-dev

第三步：修改配置文件打开config目录下webpack.config.js文件搜索sassModuleRegex 在下一行新增变量 lessRegex和lessModuleRegex

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

第四步：搜索getStyleLoaders方法增加参数 preProcessorOptions 及修改方法体

// 修改前
const getStyleLoaders = (cssOptions, preProcessor) {...if (preProcessor) {loaders.push(...{loader: require.resolve(preProcessor),options: {sourceMap: true,}});}return loaders;
}
// 修改后
const getStyleLoaders = (cssOptions, preProcessor, preProcessorOptions = {sourceMap: true,}) {...if (preProcessor) {loaders.push(...{loader: require.resolve(preProcessor),options: preProcessorOptions});}...
}

第四步：搜索test: sassModuleRegex

{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'sass-loader'),
},
// 增加的内容
{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment},'less-loader',{sourceMap: true,lessOptions: {javascriptEnabled: true // less javascriptEnabled参数}}),sideEffects: true,
},
{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,}},'less-loader',{sourceMap: true,lessOptions: {javascriptEnabled: true  // less javascriptEnabled参数}}),
},

注意：less-loader的版本不同，配置不同。
V6.0.0之前
options: {
javascriptEnabled: true
}
V6.0.0之后
options: {
lessOptions: {
javascriptEnabled: true
}
}

React 环境 webpack less 配置及 javascriptEnabled 解决方法相关推荐

Tomcat常见问题（配置）及解决方法
Tomcat常见问题 (配置)及解决方法原来使用Tomcat时总会出现各种错误,问度娘也是五花八门的答案,有时候还不能解决问题,最近看到了一个总结很全很有用的视频,在这里总结出来了,方便以后使用. ...
RAC环境创建本地数据文件的解决方法
RAC环境创建本地数据文件的解决方法: 思路如下: 1.数据文件 offline 2.通过RMAN 将数据文件拷贝到存储 3.alter database rename file 将本地文件路径修 ...
react+spring 记录跨域问题的解决方法
react+spring 记录跨域问题的解决方法参考文章: (1)react+spring 记录跨域问题的解决方法 (2)https://www.cnblogs.com/cq-jiang/p/954 ...
tomcat配置报错解决方法 The jre_home environment variable is not defined correctly
tomcat配置报错解决方法 The jre_home environment variable is not defined correctly 参考文章: (1)tomcat配置报错解决方法 Th ...
yarn 编译环境时遇到的问题和解决方法
yarn 编译环境时遇到的问题和解决方法前端环境可能出现的问题使用 yarn 安装时,报错node_modules\node sass:Command failed 'cross-env' 不是内 ...
Win11应用程序启动提示配置不正确解决方法
Win11应用程序启动提示配置不正确解决方法分享.近期有不少的用户遇到了在启动应用程序的时候,出现错误提示的问题.出现的错误提示是应用配置不正确,那么这个错误提示问题要怎么去进行解决,一起看看具体的解 ...
idea提示未配置 Spring Boot 配置注解处理器解决方法
未配置 Spring Boot 配置注解处理器解决方法: 在pom.xml里添加依赖 <dependency><groupId>org.springframework.boo ...
chrome应用程序无法启动因为应用程序的并行配置不正确解决方法
chrome应用程序无法启动因为应用程序的并行配置不正确解决方法之前chrome还好好的,突然就崩了,这个方法个人觉得很好,但是不知道是不是使用全部. 错误界面: 解决: 右击桌面快捷方式,打开文件 ...
react之webpack常用配置
create-creact-app项目,如果需要手动修改配置,需先npm run eject弹出配置,这个过程是不可逆的. 如何在不通过npm run eject进行webpack配置了? 1.用cr ...
cmake + visual studio 配置出错的解决方法
安装完vs和cmake后如果vs能正常编译,而执行cmake报错,一般都是环境变量问题,比如常见的 compiler "cl" is not able to compile a s ...

React 环境 webpack less 配置及 javascriptEnabled 解决方法

create-react-app 创建React 默认不支持less 且webpack配置默认不可见需要手动配置

第一步：打开下载webpack React项目配置文件

第二步：安装less解析依赖

第三步：修改配置文件打开config目录下webpack.config.js文件搜索sassModuleRegex 在下一行新增变量 lessRegex和lessModuleRegex

第四步：搜索getStyleLoaders方法增加参数 preProcessorOptions 及修改方法体

第四步：搜索test: sassModuleRegex

React 环境 webpack less 配置及 javascriptEnabled 解决方法相关推荐

最新文章

热门文章

React 环境 webpack less 配置 及 javascriptEnabled 解决方法

create-react-app 创建React 默认不支持less 且webpack配置默认不可见 需要手动配置

第一步：打开下载webpack React项目配置文件

第二步： 安装less解析依赖

第三步： 修改配置文件 打开config目录下webpack.config.js文件 搜索sassModuleRegex 在下一行新增变量 lessRegex和lessModuleRegex

第四步：搜索getStyleLoaders方法 增加参数 preProcessorOptions 及修改方法体

第四步：搜索test: sassModuleRegex

React 环境 webpack less 配置 及 javascriptEnabled 解决方法相关推荐

最新文章

热门文章

React 环境 webpack less 配置及 javascriptEnabled 解决方法

create-react-app 创建React 默认不支持less 且webpack配置默认不可见需要手动配置

第二步：安装less解析依赖

第三步：修改配置文件打开config目录下webpack.config.js文件搜索sassModuleRegex 在下一行新增变量 lessRegex和lessModuleRegex

第四步：搜索getStyleLoaders方法增加参数 preProcessorOptions 及修改方法体

React 环境 webpack less 配置及 javascriptEnabled 解决方法相关推荐