我正在尝试将 react-bootstrap 与 web pack 一起使用。我可以获得 bootstrap <Button>
在页面上,但没有附加样式?
我已经安装:
"devDependencies": {
"babel-core": "^5.1.11",
"babel-loader": "^5.0.0",
"css-loader": "^0.12.1",
"react-hot-loader": "^1.2.2",
"react-router": "^0.13.3",
"webpack": "^1.7.2",
"webpack-dev-server": "^1.7.0"
},
"dependencies": {
"bootstrap": "^3.3.4",
"react": "^0.13.0",
"react-bootstrap": "^0.22.6",
"whatwg-fetch": "^0.8.1"
}
}
webpack.config.js 中的加载器
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'app') },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
]
}
最佳答案
react-bootstrap 不包括 bootstrap 样式。
当他们把它放在他们的 Getting Started 上时页:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.
您应该从
bootstrap/dist/css/bootstrap.css
导入样式.由于您已经为 css 文件设置了加载程序并且依赖于 bootstrap ,所以它很简单require('bootstrap/dist/css/bootstrap.css');
或者import "bootstrap/dist/css/bootstrap.css";
关于webpack - 使用 webpack 进行 react 引导,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30371000/