我正在使用webpack-dev-server
,我正在尝试包含bootstrap。
我有这个项目结构:
── 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
这是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>
每当我运行服务器时,都会收到类型错误:
Cannot GET /css/bootstrap.min.css
这是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']
}
};
其他一切正常,问题只是引导。我在配置上尝试了很多不同的变体,但我无法让它发挥作用。
我还尝试直接从index.js
上的javascript中要求它:
import '../css/bootstrap.min.css';
我收到了这个错误:
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
从我意识到,当尝试导入Bootstrap.min.css时,webpack正试图在我的项目中找到一个字体文件。
答案 0 :(得分:11)
似乎webpack无法加载字体文件。
通过npm将file-loader
添加到项目中,并将其另存为devDependencies。
npm install file-loader --save-dev
并修改webpack.config.js中的模块加载器配置
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader',
}
尝试通过 npm 安装bootstrap,还记得jquery,它的依赖
答案 1 :(得分:4)
这是我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'}
和
import 'bootstrap/dist/css/bootstrap.css';
此外,如果您在本地使用Bootstrap
,则需要fonts
个文件夹,其中包含与Bootstrap
文件夹相同级别的css
个字体。最好使用npm
来避免所有这些麻烦。
答案 2 :(得分:1)
与@krl回答相比。这就是我在模块rules
下面的内容
https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js
$ 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'}
答案 3 :(得分:0)
Bootstrap有许多不同的文件/字体/图像需要特定的加载器。检查以下列表中的所有加载器是否存在,如果不存在,则将它们安装为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'
}
]
在你的main / entry文件中,即index.js / app.js包含bootstrap css:
import 'bootstrap/dist/css/bootstrap.css'
此配置仅适用于使用ReactJS的bootstrap css。