Question

我有一个使用bootstrap 4.0.0-beta.2的反应应用程序。我按照网站Webpack-Bootstrap中的说明在webpack中配置bootstrap。

这是我的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']
    })
]
}

我按照bootstrap 4.0.0-beta.2的要求安装了jQuery和popper。

我有一个使用bootstrap导航栏的导航组件。见下文：

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脚本标记。但是我没有使用cdn，我在使用Webpack 2的项目中包含了Bootstrap。

在我的webpack条目中，我还尝试在所有其他文件之前添加jQuery文件，如下所示：

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

但问题仍然存在。

您对如何解决此问题有任何想法吗？谢谢。

Answer 1

我最终发现了问题所在。在我的主文件 app.js 中，我只导入了bootstrap的样式部分：

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

我还要导入bootstrap的

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

所以使用webpack的bootstrap的最终配置是：

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']
})
]
}

在主要的js文件（app.js）中：导入bootstrap的两个，js部分和样式部分
```
// Bootstrap
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
```

Answer 2

从“ bootstrap”开始：“ ^ 4.5.0”，

一旦通过npm / yarn安装了Bootstrap

您只需要导入以下引导程序

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

无需在Webpack中进行配置。导入引导JS后，它将自动在node_modules中查找jQuery。

您完成了！！

Bootstrap4，Webpack，Navbar切换按钮

2 个答案: