我正在使用 react.js 和 react-router 以及 webpack 开发一个网络应用程序。 我想使用 react-bootstrap 进行样式设置,但我的导航栏似乎没有像此处所示那样设置样式 Navbar
这是我的 react Bootstrap 代码
<Navbar inverse fixedTop>
<Navbar.Collapse>
<Nav bsStyle="pills">
<NavItem href="#"><Link to="/">{this.state.navMenu[0] }</Link></NavItem>
<NavItem href="#"><Link to="/utilities">{this.state.navMenu[3] }</Link></NavItem>
<NavItem href="#"><Link to="/main">{this.state.navMenu[4] }</Link></NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
这些是依赖项
"devDependencies": {
"babel-cli": "^6.4.0",
"babel-core": "^6.4.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"style-loader": "^0.13.0",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.14.1"},
"dependencies": {
"bootstrap": "^3.3.6",
"imports-loader": "^0.6.5",
"react": "^0.14.6",
"react-bootstrap": "^0.28.2",
"react-router": "^2.0.0-rc5"
}
这是 webpack.config 文件
var webpack = require('webpack');
module.exports = {
entry: [
'babel-polyfill',
'webpack/hot/only-dev-server',
"./app.js",
],
output: {
path: __dirname + '/build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
{ test: [/\.jsx?$/, /\.es6$/], exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: 'style!css' },
]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
},
plugins: [
new webpack.NoErrorsPlugin(),
]
};
我试图要求“Bootstrap ”,但我收到以下错误:Uncaught ReferenceError: jQuery is not defined
非常感谢任何帮助。
最佳答案
你不应该包含 bootstrap,因为它会在你的元素中包含所有 bootstrap js 文件(它们具有依赖性 jquery - 因此你会出错)。您不需要 bootstrap js 文件,因为您使用的是 react-bootstrap。
要包含来自 bootstrap 的所有 css 文件:
import style from 'bootstrap/dist/css/bootstrap.css';
之后你还会遇到额外加载器的问题。这是因为,bootstrap 样式也使用其他文件。
安装:
npm install --save-dev url-loader
而且你必须添加到 webpack 配置加载器:
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
在 style-loader 文档页面,作者推荐使用 style-loader 和 css-loader。改变这个:
{ test: /\.css$/, loader: 'style!css' },
关于css - React-bootstrap 元素没有样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35107888/