React-bootstrap 元素没有样式答案

【问题标题】：React-bootstrap elements does not have stylingReact-bootstrap 元素没有样式
【发布时间】：2016-05-08 13:37:17
【问题描述】：

我正在使用 react.js 和 react-router 和 webpack 开发一个 webapp。我想使用 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(),
      
    ]

};

我尝试过要求“引导程序”，但出现以下错误：未捕获的 ReferenceError: jQuery is not defined

非常感谢任何帮助。

【问题讨论】：

"jQuery is not defined" 错误表示 jQuery 缺失，是否链接？

标签： css twitter-bootstrap reactjs webpack react-bootstrap

【解决方案1】：

您不应该包含引导程序，因为它会在您的项目中包含所有引导程序 js 文件（它们作为依赖项 jquery - 因此您会出错）。您不需要引导 js 文件，因为您使用的是 react-bootstrap。

从引导写入中包含所有 css 文件：

import style from 'bootstrap/dist/css/bootstrap.css';

之后，您还会遇到其他加载程序的问题。这是因为，引导样式也使用其他文件。

安装：

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' },

【讨论】：

非常感谢！这对我有用。我非常感谢你。

【解决方案2】：

一些人可能会觉得有用的更新：确保安装 bootstrap v3.3.7 (npm install --save bootstrap@3.3.7) 而不是最新版本 4，因为 react-bootstrap 以 v3 中的 CSS 为目标。许多样式（例如导航栏的样式）在 v4 的 CSS 中不存在。

【讨论】：