react项目配置less(修改webpack.config.js方法)

本文介绍了如何在React项目中配置Less,包括通过npm或yarn安装依赖,展示并修改webpack.config.js的步骤,以及解决在配置过程中遇到的'TypeError: this.getOptions is not a function'错误的方法,建议降级less-loader版本来解决问题。
摘要由CSDN通过智能技术生成

1、在新建的react项目中安装
npm 使用 npm install less less-loader
yarn 使用 yarn add less less-loader
2、在命令行输入npm run eject,将config下webpack.config.js显示出来.并且配置
3、在webpack.config.js中:
①在const sassModuleRegex = /.module.(scss|sass)$/下面添加:

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

②在{ test: sassModuleRegex,… }代码下面添加:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React项目配置Less样式预处理器可以按照以下步骤进行操作: 1. 首先,在项目根目录下使用命令行工具安装所需的依赖包。运行以下命令: ``` yarn add less less-loader -D ``` 这将安装Less和Less Loader作为开发依赖。 2. 接下来,修改项目的package.json文件中的"scripts"部分。将"start"、"build"和"test"命令为使用react-app-rewired运行。例如: ``` "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" } ``` 这样可以确保在启动、构建和测试项目时使用react-app-rewired。 3. 在项目根目录下创建一个名为config-overrides.js的文件。这个文件将用于修改webpack配置。 4. 在config-overrides.js中,可以使用react-app-rewired提供的API来修改webpack配置。具体的配置可以参考Less Loader的官方文档。例如,可以通过以下方式添加Less Loader: ``` const { override, addLessLoader } = require('customize-cra'); module.exports = override( addLessLoader() ); ``` 这样,Less Loader就会被添加到webpack配置中。 总结一下,要在create-react-app创建的项目配置Less样式预处理器,需要安装相关依赖、修改package.json文件和创建config-overrides.js文件来修改webpack配置。通过这些步骤,你就可以在React项目中使用Less样式了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [react中使用less](https://blog.csdn.net/ein5702/article/details/119420883)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [如何在react项目配置less](https://blog.csdn.net/weixin_33976072/article/details/93482309)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值