关于create-react-app不能使用less的两种解决方法(实现按需打包)

最新推荐文章于 2024-04-19 11:23:43 发布

Sixology.

最新推荐文章于 2024-04-19 11:23:43 发布

阅读量1.9k

点赞数 1

分类专栏： react 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/qq_44685099/article/details/109099213

版权

本文介绍了在create-react-app项目中如何解决不能使用less的问题，提供了两种解决方案：一是通过运行npm run eject修改webpack配置，添加less和less-loader；二是利用react-app-rewired实现按需加载，通过下载依赖并定制配置文件完成less的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用create-react-app这个脚手架默认搭建的项目工程中是不能使用less的
我个人的解决方法有如下两种

1.修改create-react-app的webpack配置

1.运行npm run eject，会多出两个目录config和scripts，此时可以在config目录下看到配置文件webpack.config.js。
2.下载less和less-loader

// 使用npm
 npm install less less-loader --save-dev
 // 使用 yarn
 yarn add less less-loader

3.添加less-loader
在这里插入图片描述
4.添加下面这段代码

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