twitter-bootstrap 无法使引导程序与 Webpack 一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34840653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot make bootstrap work with Webpack
提问by lhahn
I am working with a webpack-dev-serverand I am trying to include bootstrap.
我正在使用 awebpack-dev-server并且我正在尝试包含引导程序。
I have this project structure:
我有这个项目结构：
── css
│?? └── bootstrap.min.css
│── js
| └── bootstrap.min.js
├── dist
├── index.html
├── package.json
├── server.js
├── src
│?? ├── actions.js
│?? ├── App.js
│?? ├── components
│?? ├── constants
│?? ├── index.js
│?? └── reducers.js
└── webpack.config.js
This is the index.html:
这是index.html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div id='root'></div>
<script src="/static/bundle.js"></script>
</body>
</html>
Whenever I run the server, I get an error of the type:
每当我运行服务器时，都会出现以下类型的错误：
Cannot GET /css/bootstrap.min.css
Here is the webpack.config.js:
这是 webpack.config.js：
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
},
{
test: /\.css$/,
loader: 'style!css'
}]
},
resolve: {
extensions: ['', '.js', '.jsx', '.json']
}
};
Everything else works fine, the problem is just bootstrap. I tried a lot of different variations on the configurations, but I can't get it to work.
其他一切正常，问题只是引导程序。我在配置上尝试了很多不同的变体，但我无法让它工作。
I also tried requiring it directly from javascript on index.js:
我还尝试直接从 javascript 要求它index.js：
import '../css/bootstrap.min.css';
And I get this error:
我收到这个错误：
ERROR in ./~/css-loader!./css/bootstrap.min.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in /home/lhahn/dev/javascript/sha/css
@ ./~/css-loader!./css/bootstrap.min.css 6:3278-3330 6:3348-3400
Edit
编辑
From what I realised, webpack is trying to find a font file inside my project, when trying to import Bootstrap.min.css.
据我所知，当尝试导入 Bootstrap.min.css 时，webpack 试图在我的项目中找到一个字体文件。
回答by Matteo Basso
It seems that webpack cannot load font files.
webpack 似乎无法加载字体文件。
Add
file-loadervia npm to your project, and save it as devDependencies.npm install file-loader --save-devAnd modify the module loaders configuration in your webpack.config.js
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader', }
file-loader通过 npm添加到您的项目中，并将其保存为 devDependencies。npm install file-loader --save-dev并修改 webpack.config.js 中的模块加载器配置
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader', }
Try installing bootstrap through npm, remember also jquery, its dependency
尝试通过npm安装引导程序，还要记住 jquery，它的依赖项
回答by krl
This what I have in order for Bootstrapto work with Webpack:
这是我为了Bootstrap与之合作而拥有的Webpack：
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
and
和
import 'bootstrap/dist/css/bootstrap.css';
Also, if you are using Bootstraplocally, you need to have fontsfolder, containing Bootstrapfonts at the same level as cssfolder. It's best to use npmto avoid all this trouble.
此外，如果您在Bootstrap本地使用，则需要有fonts文件夹，其中包含Bootstrap与css文件夹相同级别的字体。最好使用npm以避免所有这些麻烦。
回答by Dirk Hoffmann
compared to @krl answer. this is what I put under modules rulesin
https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js
与@krl 的答案相比。这就是我把下面的模块rules在
https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js
after having $ npm install style-loader css-loader url-loader --save-dev
得到之后 $ npm install style-loader css-loader url-loader --save-dev
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader'},
{test: /\.(woff|woff2)$/, use: 'url-loader?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml'}
回答by vashishatashu
Bootstrap has a number of different files/fonts/images that needs specific loaders. Check if all loaders in following list are present, if not npm install them as devDependencies and add in webpack.config.js as :
Bootstrap 有许多不同的文件/字体/图像需要特定的加载器。检查以下列表中的所有加载程序是否都存在，如果不存在 npm 将它们安装为 devDependencies 并将 webpack.config.js 添加为：
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.html$/,
loader: "html"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.txt$/,
loader: 'raw-loader'
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000'
}, {
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader'
}
]
And in your main/entry file i.e. index.js/app.js include bootstrap css as :
在您的主/条目文件中，即 index.js/app.js 包含 bootstrap css 为：
import 'bootstrap/dist/css/bootstrap.css'
This configuration is only for using bootstrap css with ReactJS.
此配置仅用于在 ReactJS 中使用 bootstrap css。
