在 react 项目里使用 bootstrap

背景描述:
想使用 bootstrap + react + webpack + sass 开发项目时,

1. npm install bootstrap -S , 配置 webpack.config.js:

{
 test: /\.scss$/,
 use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}

2. 入口文件里引用 bootstrap:

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

一. 报错:

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
|   font-family: sans-serif;
|   -webkit-text-size-adjust: 100%;
 @ ./app/app.jsx 17:0-43

这个错误在网上死活找不到答案, 应该是缺少某些loader, 或者写的不正确, 我当时的配置是因为项目中只用到了 .scss 结尾的文件, 所以只设置了 test: /\.scss$/ 这样的规则, 一直报上面的错误.

查了资料说引入 bootstrap 的时候要用 css-loader style-loader url-loader file-loader 等一大堆 loader 才能正确处理 bootstrap 里引用的 图片, 字体 等资源, 于是就找这些图片, 字体的匹配规则, 心力交瘁. 还是报上面的错误.

吃了个饭, 想到不如用 bootstrap-loader, react-bootstrap 等替代方案, 于是去看看 bootstrap-loader 如何使用, universal-bootstrap-loader, 它的作用是加载 bootstrap 的样式和脚本到你的 webpack 最终打包的 bundle 中去.

在它给出的 例子 中, 能够看到 webpack.dev.config.js 的配置, 把处理 bootstrap 资源的匹配规则粘过来, 如下, 正常启动了.

二. 配置 webpack.config.js

{
 test: /\.css$/,
 use: ['style-loader', 'css-loader']
},
{
 test: /\.scss$/,
 use: ['style-loader', 'css-loader', 'sass-loader']
},
{
 test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
 use: 'url-loader?limit=10000',
},
{
 test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
 use: 'file-loader',
}         

---

参考资料:
How To Import Bootstrap Using Webpack
How to use Webpack with React and Bootstrap
Webpack Configuration for Using Bootstrap in React