lha*_*ahn 7 javascript twitter-bootstrap webpack webpack-dev-server webpack-style-loader
我正在使用a 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']
}
};
其他一切都很好,问题只是引导.我在配置上尝试了很多不同的变体,但我无法让它工作.
我也试过直接从javascript上求它index.js:
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正试图在我的项目中找到一个字体文件.
Mat*_*sso 11
似乎webpack无法加载字体文件.
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',
}
尝试通过npm安装bootstrap ,还记得jquery,它的依赖
| 归档时间： |
|
| 查看次数： |
14154 次 |
| 最近记录： |