React-Bootstrap 如何使用 Webpack

Question

我正在尝试在 webpack 中使用 react-bootstrap。我能够在页面上获取 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" }
    ]
  }

- Chris G.

Answer 1

react-bootstrap不包含bootstrap样式。

正如他们在其入门页面上所说：

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

你应该从 bootstrap/dist/css/bootstrap.css 中导入样式。由于您已经设置了css文件的加载器并且依赖于bootstrap，因此很简单：

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

或者

import "bootstrap/dist/css/bootstrap.css";

- Alexandre Kirszenberg

---

你也可以使用webpack less-loader，并挑选你想要包含的bootstrap组件。这将使得在完成时，webpack能够给你一个更小的压缩捆绑包。 - Matt Smith

这个方法效果还不错，但是对我来说需要使用require('bootstrap/dist/css/bootstrap.css');。 - CallMeNorm

可能你还要为字体配置加载器这样做。我还需要复制该行代码以支持woff2格式，并将其更改为woff以支持这两种类型。 - Piotr Sobczyk

我漏掉了什么吗？你们是否遇到了有关eot、woff2、ttf和svg文件的错误？我不得不使用这个建议来解决这个问题。 - Tyler Collier

嗯，我们需要把它放在哪里？在webpack配置中吗？在Index.js或styles.css中？ - realisation