React导入less及其注意事项说明
更新时间：2024年11月08日 11:28:50 作者：帅气的小苏
在Vite构建的React项目中,直接安装和导入Less即可使用,但需注意的是,Less的样式作用域不局限于模块内部,可能造成样式污染,建议通过修改文件名和导入方式来避免此问题
React导入less及注意事项
首先我们肯定要下载一下 less，这里我是用 vite 构建的 react 项目，由于 vite 已经内置了对 less 配置，所以下载完直接导入就行
> npm i less
这时候我们就可以十分愉悦地使用 less 了吗？
请看一个小例子
这里我创建了两个 tsx 模块，分别为 computer 和 test，
在 computer 里，我引入了相应的 computer 的 less，而 test 的 jsx 没有
并且将两个模块导入到 APP.
tsx，当我们运行项目的时候，发生了一些意想不到的情况，
我在 computer 模块写的样式,为什么会在 test 模块中出现呢。
从这里可以看出，computer 的 less 的作用域并没限定在模块之内，而是造成了污染，
此时我们应该这么做，将less的文件名改变成这样
然后改变computer中的引入
这样子就可以啦。
这里插一句，scss的导入也是一样的.
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了React Hydrate原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本文主要介绍了React中前端路由的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家介绍了React大屏可视化脚手架教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
react项目使用json-server模拟接口获取数据的操作方法
文章介绍了如何在React项目中使用json-server模拟接口并获取数据,首先安装json-server,创建JSON格式的数据文件,并在package.json中添加启动命令,启动服务后,可以通过指定的路径获取模拟的数据,感兴趣的朋友一起看看吧2025-11-11
这篇文章主要介绍了React组件渲染后对DOM的操作方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
使用VScode 插件debugger for chrome 调试react源码的方法
这篇文章主要介绍了使用VScode 插件debugger for chrome 调试react源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家介绍了React Suspense解决竞态条件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本文主要介绍了React 三大核心属性，主要包括State属性，Props属性，Refs属性，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文主要介绍了React使用Redux实现组件通信的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-09-09
这篇文章主要为大家介绍了Header组件热门搜索栏的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论