Laravel 9中用Vite安装Bootstrap 5遇问题求助

问题背景 #

按官方指南集成Bootstrap 5.2与Vite后，出现文件找不到、样式不生效的问题，具体操作及错误如下：

已执行的操作 #

• 安装Bootstrap：

  npm install bootstrap@5.2.2
  

• 安装Sass开发依赖：

  npm i --save-dev sass
  

• 配置vite.config.js别名：

  resolve: {
      alias: {
          '~bootstrap': path.resolve(__dirname, 'nodes_modules/bootstrap'),
      }
  }
  

• 在/resources/app.js中引入资源：

  import '/resources/scss/styles.scss'    
  import * as bootstrap from 'bootstrap';
  

• 创建/resources/scss/styles.scss并导入Bootstrap：

  // Import all of Bootstrap's CSS
  @import "~bootstrap/scss/bootstrap";
  

出现的错误 #

执行npm run dev或npm run build时抛出：

[plugin:vite:css] [sass] ENOENT: no such file or directory, open '/var/www/myapp/nodes_modules/bootstrap/scss/bootstrap

同时存在Bootstrap样式完全不生效的情况。

修复方案 #

1. 修正别名路径拼写错误 #

核心问题是vite.config.js里把node_modules写成了nodes_modules（多了一个s），这直接导致路径找不到。修正后的完整配置：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    },
  },
})

注意：要确保顶部引入了path模块，否则会报错path is not defined

2. 优化SCSS导入写法 #

Vite中更可靠的导入方式是直接使用包名，无需依赖别名，修改styles.scss：

// 推荐写法：直接通过包名导入
@import "bootstrap/scss/bootstrap";

如果坚持用别名，确保别名配置正确后再用@import "~bootstrap/scss/bootstrap";

3. 调整JS中的导入路径 #

避免使用绝对路径，改用相对路径更稳妥（假设app.js在resources目录下）：

import './scss/styles.scss'
import * as bootstrap from 'bootstrap';

4. 重置依赖（可选） #

如果之前的依赖安装有损坏，执行以下命令重新安装：

rm -rf node_modules package-lock.json
npm install

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