Bootstrap4, Webpack, Navbar 토글 버튼

부트 닥 4.0.0-beta.2를 사용하는 반응 형 앱이 있습니다. 그들의 웹 사이트 Webpack-Bootstrap에 설명 된대로 webpack에 부트 스트랩을 구성합니다.Bootstrap4, Webpack, Navbar 토글 버튼

이것은 내 webpack.config.js :

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
entry: ["babel-polyfill",'./src/app.js'], 
output: { 
    path: path.join(__dirname, 'public'), 
    filename: 'bundle.js' 
}, 
module: { 
    rules: [{ 
     loader: 'babel-loader', 
     test: /\.js$/, 
     exclude: /node_modules/ 
    }, { 
     test: /\.(scss|css)$/, 
     use: [ 
      'style-loader', 
      'css-loader', 
      'sass-loader' 
     ] 
    }] 
}, 
plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery', 
     Popper: ['popper.js', 'default'] 
    }) 
] 
}

부트 스트랩 4.0.0-beta.2 요구하는대로 내가 jQuery를하고 포퍼를 설치합니다.

부트 냅 navbar를 사용하는 탐색 구성 요소가 있습니다. 아래 참조 :

const Navigation =() => { 
return (
    <nav className="navbar navbar-expand-lg navbar-dark fixed-top"> 
     <h1 className="navbar-brand">My App</h1> 
     <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
      <span className="navbar-toggler-icon"></span> 
     </button> 
     <div className="collapse navbar-collapse" id="navbarNavAltMarkup"> 
      <div className="navbar-nav"> 
      <li><NavLink exact to="/" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Menu 1</NavLink></li> 
      <li><NavLink exact to="/classement" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Menu 2</NavLink></li> 
      <li><NavLink exact to="/calendrier" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Menu 3</NavLink></li> 
      <li><NavLink exact to="/archives" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Archives</NavLink></li> 
      </div> 
     </div> 
    </nav> 
) 
};

내 문제는 토글 버튼이 작동하지 않는다는 것입니다. 소형 장치를 사용하는 경우 전환 버튼이 표시되지만 클릭하면 아무 일도 발생하지 않습니다. 작은 장치에서 메뉴를 사용할 수 없습니다.

이 문제에 대한 몇 가지 답변을 읽었지만, cdn을 사용하는 경우 다른 모든 스크립트보다 먼저 jQuery 스크립트 태그를 넣는 것이 좋습니다. 그러나 나는 내 웹팩 항목에서 웹팩 2.

를 사용하여 내 프로젝트의 부트 스트랩을 포함하고, CDN을 사용하고 있지 않다, 나는이 같은 다른 모든 파일 전에 jQuery를 파일을 추가하려고 :

module.exports = { 
entry: ["babel-polyfill",'script-loader!jquery/dist/jquery.min.js','./src/app.js'], 
...

그러나 문제는 여전히 존재합니다.

이 문제를 해결하는 방법에 대해 알고 계십니까? 고맙습니다.

출처

2017-10-30 Alee

마지막으로 문제점을 발견했습니다. 내 주요 파일 에서 이을 app.js, 난 단지 부트 스트랩의 스타일 부분 수입 : 나는 또한 부트 스트랩의 JS 부분을 가져와야합니다

import 'bootstrap/dist/css/bootstrap.min.css';

을

// Bootstrap 
import 'bootstrap'; 
import 'bootstrap/dist/css/bootstrap.min.css';

부트 스트랩의 그래서 최종 구성 웹팩을 사용하는 것입니다 :

는

을 webpack.config.js주요 JS 파일에서

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
entry: ["babel-polyfill",'./src/app.js'], 
output: { 
    path: path.join(__dirname, 'public'), 
    filename: 'bundle.js' 
}, 
module: { 
rules: [{ 
    loader: 'babel-loader', 
    test: /\.js$/, 
    exclude: /node_modules/ 
}, { 
    test: /\.(scss|css)$/, 
    use: [ 
     'style-loader', 
     'css-loader', 
     'sass-loader' 
    ] 
}] 
}, 
plugins: [ 
new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery', 
    Popper: ['popper.js', 'default'] 
}) 
] 
}

에게 (app.js) : 수입 모두 JS 부분 부트 스트랩

// Bootstrap 
import 'bootstrap'; 
import 'bootstrap/dist/css/bootstrap.min.css';

의 스타일의 일부

출처

2017-11-01 10:45:09 Alee

Bootstrap4, Webpack, Navbar 토글 버튼

답변

관련 문제