Hbuilder如何配置less以及配置失败的解决方法

如果是前端工程师,node的使用是必不可少的,现在版本的node里面包含npm的安装,我们可以通过npm下载less ,方法步骤如下

第一步:

    首先安装 nodejs,安装路径:https://nodejs.org/en/

哪一个版本都可以,8.12.0稳定一些,但是需要安装 , 10.11.0新版本,不稳定,优点是免安装

第二步:

    如果是用的8.12.0版本的话,系统的环境变量自动配置好了,直接在命令中打开即可:系统键+R 

第三步: 输入以下命令:

记录下路径

第三步: 

第四步:打开hbuilder编辑器

点击工具------>预编译器设置

如果有less就点击编辑,如果没有点击新建

文件后缀填写: less ,触发命令地址:刚才下载 less 的路径 , 工作目录不填写,命令参数填写:%FileName%    %FileBaseName%.css

然后点击智能完成,点击智能完成的时候触发命令地址路径会变动一下,说明完成配置,然后点击确定

如果没有变动,则配置失败,失败的原因:

    第一:路径不对,检查路径,然后去掉前后空格

    第二:路径对了,但是任然不行,那就需要改掉npm的下载路径: 在命令行中编写

          npm config set  prefix   "路径",这个路径需要写nodejs安装目录的第一级,例如:

我的安装目录在d:\nodejs下边,那么这个路径编写为 : npm config set  prefix "d:\nodejs"

然后重新下载,less文件

第三: 如果npm输入命令没有用,那就需要删除,c盘中后缀为.npmrc的文件,如果任然没有用,那就需要删除c盘中所有有关npm的文件,然后重新安装nodejs,即可

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值