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将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态2022-08-08
React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state)和生命周期函数2023-01-01
这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程（安卓部分）为例，给大家分析 React Native 的启动流程，需要的朋友可以参考下2021-08-08
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要给大家介绍了关于React18的useEffect执行两次如何应对的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用React具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
用React-Native+Mobx做一个迷你水果商城APP(附源码)
这篇文章主要介绍了用React-Native+Mobx做一个迷你水果商城APP,功能需要的朋友可以参考下2017-12-12
使用react-native-doc-viewer实现文档预览
这篇文章主要介绍了使用react-native-doc-viewer实现文档预览，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vite+React+TypeScript手撸TodoList的项目实践
本文主要介绍了Vite+React+TypeScript手撸TodoList的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
React-router v6在Class组件和非组件代码中的正确使用
这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了React函数组件hook原理及构建hook链表算法详情，每一个 hook 函数都有对应的 hook 对象保存状态信息，更多详细分析，需要的朋友可以参考一下2022-07-07
最新评论