React搭配bootstrap并为scss或less文件启动模块化

本文介绍了如何在React项目中结合Bootstrap,通过安装和配置相关依赖,解决Bootstrap字体图标和样式导入问题。通过调整webpack配置,实现对.scss和.less文件的模块化处理,而对.css文件不启用模块化,确保第三方库如Bootstrap的正确引用。
摘要由CSDN通过智能技术生成

React的灵活性可以很好地与已知库或框架搭配,以bootstrap为例,首先进行bootstrap的安装:

cnpm i bootstrap@3.3.7 -S

然后再所需文件内导入该框架:

import bootobj from 'bootstrap/dist/css/bootstrap.css'

由于该包被安装到了node_modules目录下,因此可以省略该目录,直接以包名引入自己的模块或样式表,但是bootstrap自带的一些字体图标文件webpack是无法处理的,首先下载对应的工具包:

cnpm i url-loader -D
cnpm i file-loader -D

webpack.config.js配置:

{
   test:/\.ttf|woff|woff2|eot|svg$/, use:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值