Vue2 SPA中Webpack加载Bootstrap CSS失败问题排查

看起来你遇到的问题主要来自两个核心点，咱们一步步拆解解决：

1. 先搞定style-loader缺失的关键错误 #

从报错信息Can't resolve 'style-loader'能直接看出来：你只安装了css-loader，但完全没装style-loader——可你的webpack配置里明明指定了要使用它，这是导致后续一系列错误的根源。

赶紧执行这条命令补上依赖：

npm install --save-dev style-loader

2. 简化Bootstrap和Bootstrap-Vue的导入路径 #

你不需要写冗长的../node_modules/前缀，webpack会自动在项目的node_modules目录里查找npm包资源，直接用下面的写法就足够可靠：

// main.js里的正确导入方式
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

之前你尝试过这种写法，但因为style-loader缺失的问题，错误信息被混淆了，解决第一个问题后，这个写法就能正常工作。

3. 确认webpack配置的loader顺序 #

webpack加载loader是从右到左执行的，所以style-loader必须放在css-loader前面，检查你的webpack.conf.js配置是否符合要求：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 顺序绝对不能反
      }
      // ...其他规则
    ]
  }
}

4. 验证Bootstrap-Vue的安装完整性 #

虽然你说已经安装了，但可以重新执行安装命令确保包没有损坏：

npm install bootstrap-vue

安装完成后，去项目的node_modules/bootstrap-vue/dist/目录下确认bootstrap-vue.css文件确实存在，避免因为包安装不完整导致的路径错误。

完成以上步骤后，重启你的webpack开发服务器，应该就能正常加载Bootstrap和Bootstrap-Vue的CSS了。

内容的提问来源于stack exchange，提问作者BT101