Элементы react-bootstrap не имеют стиля

Question

Я работаю над webapp, используя response.js и ret-router и webpack. Я хотел бы использовать реагировать-самозагрузку для укладки, но мой Navbar не по всей видимости, в стиле, как показано здесь http://react-bootstrap.github.io/components.html#navbars

это мой реагировать-самозагрузку код

<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(), 

    ] 

}; 

Ive попытался потребовать «bootstrap», но я получаю следующее сообщение об ошибке: Uncaught ReferenceError: jQuery не определен

всякая помощь с благодарностью пожалуйста.

Answer 1

Вы не должны включать bootstrap, потому что он будет включать в ваш проект все файлы bootstrap js (они имеют как jquery зависимости, поэтому вы получаете ошибку). Вам не нужны файлы bootstrap js, потому что вместо этого вы используете реакцию-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' 
}, 

В странице документации стиль погрузчика, автор рекомендует использовать стиль-погрузчик с CSS-погрузчиком. Изменить это:

{ test: /\.css$/, loader: 'style!css' }, 

Answer 2

обновление некоторые из них могут оказаться полезными: убедитесь, что вы установите самозагрузки v3.3.7 (НАЯ установку --save bootstrap@3.3.7) и не самая новая версия 4, так как реагировать-самозагрузку цели СМЧА в v3. Многие стили, например, для navbar, не существуют в CSS для v4.