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 Native 真机断点调试+跨域资源加载出错问题的解决方法
下面小编就为大家分享一篇React Native 真机断点调试+跨域资源加载出错问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家归纳总结了Remix 表单常用方法及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
react开发中如何使用require.ensure加载es6风格的组件
本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
react项目升级报错,babel报错,.babelrc配置兼容等问题及解决
这篇文章主要介绍了react项目升级报错,babel报错,.babelrc配置兼容等问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了React18从0实现dispatch update流程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
react-native使用react-navigation进行页面跳转导航的示例
本篇文章主要介绍了react-native使用react-navigation进行页面跳转导航的示例，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要为大家介绍了React弹窗使用方式NiceModal重新思考分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了详解一个基于react+webpack的多页面应用配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
React useContext与useReducer函数组件使用
useContext和useReducer 可以用来减少层级使用, useContext，可以理解为供货商提供一个公共的共享值，然后下面的消费者去接受共享值，只有一个供货商，而有多个消费者，可以达到共享的状态改变的目的2023-02-02
我们组的前端妹子在组内分享时谈到了 react 的钩子，趁此机会我也对我所理解的内容进行下总结，方便更多的同学了解。在 React 的 v16.8.0 版本里添加了 hooks 的这种新的 API，我们非常有必要了解下他的使用方法，并能够结合我们的业务编写几个自定义的 hooks。2021-05-05
最新评论