项目导入Bootstrap时Live Server报错，寻求解决方案

1. 校验依赖环境与版本 #

• 先确认Node.js版本满足Bootstrap 5.x要求（≥14.17.0），执行node -v查看版本，不够就升级到LTS版
• 清空依赖缓存重新安装，避免缓存导致的依赖异常：

  rm -rf node_modules package-lock.json
  npm install
  

2. 修正Webpack的SCSS Loader配置 #

• 确保已安装所有必需的loader，执行：

  npm install sass-loader sass css-loader style-loader --save-dev
  

• 检查webpack.config.js中的SCSS解析规则，开发环境下正确配置应为：

  module.exports = {
    // ...其他配置项
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader', // 将编译后的CSS注入到DOM中
            'css-loader',   // 解析CSS中的@import和url()语法
            'sass-loader'   // 把SCSS编译为标准CSS
          ]
        }
      ]
    }
  };
  

• 如果是生产环境使用mini-css-extract-plugin，需要替换style-loader为插件的loader，同时记得在plugins数组中注册该插件。

3. 优化Bootstrap SCSS导入路径 #

• Webpack会自动从node_modules目录查找依赖，无需写完整相对路径，直接在styles.scss中写：

  @import "bootstrap/scss/bootstrap";
  

• 也可以给Bootstrap SCSS配置Webpack别名，进一步减少路径出错概率：
  在webpack.config.js中添加：

  const path = require('path');
  
  module.exports = {
    // ...其他配置项
    resolve: {
      alias: {
        'bootstrap-scss': path.resolve(__dirname, 'node_modules/bootstrap/scss')
      }
    }
  };
  

  之后在styles.scss中导入：

  @import "bootstrap-scss/bootstrap";
  

4. 排查模块冲突与变量问题 #

• 如果导入部分Bootstrap模块正常，说明完整导入时存在冲突，可逐步导入模块定位问题：

  // 先导入基础依赖
  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/mixins";
  // 再逐个添加组件模块，比如：
  @import "bootstrap/scss/buttons";
  

• 检查自己的styles.scss中是否有与Bootstrap内置变量（如$primary、$secondary）重名的变量，如有则修改为自定义名称。

5. 规范项目启动方式 #

• 不要直接用Live Server打开静态文件，改用Webpack Dev Server处理编译与热重载：
  在package.json的scripts中添加：

  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
  

  然后执行npm start启动项目，Webpack会自动处理SCSS编译并启动开发服务器。

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