我正在使用 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']
}
};
其他都正常,问题只出在Bootstrap上。我尝试了很多不同的配置变化,但无法使其工作。
我还尝试从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试图在我的项目中查找字体文件。
npm install file-loader --save-dev
进行了安装,但错误仍然存在。 - lhahn{ test: [/\.woff?$/, /\.woff2?$/, /\.ttf?$/, /\.eot?$/, /\.svg?$/], loader: 'url-loader' }
- Wylliam Judd