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

最新推荐文章于 2023-11-16 11:42:47 发布

原创最新推荐文章于 2023-11-16 11:42:47 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

103 篇文章

订阅专栏

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

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:'url-loader'},

但是引用bootstrap的样式表是比较麻烦的，像下面这段代码：

<button className={[bootcss.btn, bootcss['btn-primary']].join(' ')}>按钮</button>

那么可以不可以像最开始那样书写引用样式表呢？

<button className="btn btn-primary">按钮</button>

但是因为之前都对普通样式表启用了模块化，因此想上面这个书写是错误的，在这里做一些自定义得规定，对于第三方引用的样式表，后缀名设为.css，对于自己创建的样式表，使用.scss或者.less，不对.css文件启动模块化，只对.scss和.less启动模块化，安装工具包：

cnpm i sass-loader node-sass -D

webpack.config.js配置：

 {test: /\.scss$/, use:['style-loader', { loader: 'css-loader',options: {modules: { localIdentName: '[path][name]-[local]-[hash:5]'}}},'sass-loader']}

注意需要去除之前css文件配置的模块化，转移到本次配置中。
在文件中引用bootstrap的导入语句也可以修改为这样：

import 'bootstrap/dist/css/bootstrap.css'

因为它并未被模块化，也不会向外暴露成员。