介绍：Webpack Bootstrap Navbar 错误

如果你使用 Webpack 和 Bootstrap，可能会遇到以下错误：Bootstrap 导航栏样式未能正确加载或样式错乱。这个问题是由 Webpack 打包方式与 Bootstrap 样式加载方式的不兼容造成的。

解决方法

1. 把 CSS 文件单独打包

在 Webpack 配置文件中，将 CSS 文件单独打包到一个文件中，而不是把它们作为 JavaScript 文件的一部分加载。这个方法需要用到 extract-text-webpack-plugin 插件。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}

2. 利用 Webpack Provide Plugin

在 Webpack 配置文件中，使用 Webpack Provide Plugin 自动全局加载需要的核心库（如 jQuery 或 Bootstrap）。

const webpack = require('webpack');

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

3. 使用 bootstrap-loader

使用 bootstrap-loader，可以在 Webpack 中直接加载 Bootstrap 样式和 JavaScript，并支持自定义主题。

const bootstrapEntryPoints = require('./webpack.bootstrap.config');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /bootstrap\.js$/,
        use: 'imports-loader?jQuery=jquery'
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  ...
  entry: bootstrapEntryPoints
}

结论

以上方法可以解决 Webpack Bootstrap 导航栏样式未能正确加载或样式错乱的问题。根据具体情况，可以选择合适的解决方法。