背景描述:
想使用 bootstrap + react + webpack + sass 开发项目时,
-
npm install bootstrap -S, 配置 webpack.config.js:
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}
- 入口文件里引用 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
网友评论