react脚手架create-react-app安装后less的webpack.config.js配置

最新推荐文章于 2023-04-14 17:10:40 发布

原创最新推荐文章于 2023-04-14 17:10:40 发布 · 817 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react+less #webpack.config.js配置less #create-react-app 脚手架不支持less解决方案

react 工程配置同时被 2 个专栏收录

2 篇文章

订阅专栏

create-react-app 脚手架不支持less解决方案

1 篇文章

订阅专栏

本文详细介绍了如何在React项目中集成Less预处理器，包括使用create-react-app脚手架创建项目，暴露依赖，修改webpack配置，安装Less及less-loader，以及最终验证Less功能是否正确集成。

create-react-app脚手架安装好react工程后是无法支持less的。而且最新版本的脚手架安装好工程后运行npm run eject暴露出依赖后在config目录下只有webpack.config.js文件，而不是像老脚手架暴露出依赖后会有webpack.config.dev.js和 webpack.config.prop.js网上好多讲的配置方法也不行，于是特记录自己成功的方法。
并且react文件的className你能使用less文件里面的变量。

第一步：用脚手架安装工程

npx create-react-app test-react

第二步：暴露依赖

npm run eject
运行完后，会多出两个文件config和scripts，如下
在这里插入图片描述

第三步：修改webpack.config.js实现less可用

修改第一处：添加两行

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

在这里插入图片描述

修改第二处： 添加以下代码在430行左，这里必须注意的是，必须将以下代码放在 test: cssRegex, 的前面，否则不会生效，本人在这里遇到坑了，搞了很久。

{
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
       {
         importLoaders: 1,
         sourceMap: isEnvProduction && shouldUseSourceMap,
       },
       'less-loader'
   ),
   sideEffects: true,
 },

 {
   test: lessModuleRegex,
   use: getStyleLoaders(
       {
         importLoaders: 1,
         sourceMap: isEnvProduction && shouldUseSourceMap,
         modules: true,
         getLocalIdent: getCSSModuleLocalIdent,
       },
       'less-loader'
   ),
 },

在这里插入图片描述