25

我正在尝试将 react-bootstrap 与 web pack 一起使用。我可以<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" }
    ]
  }
4

1 回答 1

39

react-bootstrap 不包括引导样式。

正如他们在入门页面上所说的那样:

因为 React-Bootstrap 不依赖于非常精确的 Bootstrap 版本,所以我们不附带任何包含的 CSS。但是,需要一些样式表才能使用这些组件。

您应该从中导入样式bootstrap/dist/css/bootstrap.css。由于您已经为 css 文件设置了加载程序并依赖于引导程序,因此它很简单

require('bootstrap/dist/css/bootstrap.css');

或者

import "bootstrap/dist/css/bootstrap.css";
于 2015-05-21T11:47:20.203 回答