Bootstrap Datepicker独立运行正常 移入Laravel Mix环境后失效问题求助

问题根源 #

你最大的配置错误是将JS资源错误写到了SASS文件中引入：SASS是CSS预处理器，仅会处理CSS类资源，你写在app.scss里的3条JS资源导入规则完全不会生效，等于jQuery、Bootstrap JS、Datepicker JS全部没有加载，自然无法触发组件。
另外你页面模板中存在标签不匹配问题：<h4 class="">Prefer Date</h3> 开头是h4、闭合是h3，虽然不影响JS执行，建议修正。 #

解决方案 #

步骤1：修正/resources/sass/app.scss内容

删除文件中所有JS相关的@import语句，仅保留CSS类资源导入：

// 仅保留CSS资源导入
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

修改完成后执行前端资源编译：

• 用Vite的环境执行 npm run dev 或 npm run build
• 用Laravel Mix的环境执行 npm run dev 或 npm run prod

步骤2：正确加载JS资源

两种可选方案，选一种即可：

方案A：直接在模板中引入CDN资源（最简单，无需改动编译配置）

在页面模板的</body>标签之前、你的Datepicker初始化代码之前，按顺序引入JS资源（顺序不能乱，后面的资源依赖前面的）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- 下面放你原来的初始化代码 -->
<script type="text/javascript">
  $(function() {
    $('#datepicker').datepicker();
  });
</script>

方案B：通过Laravel前端构建工具引入

打开/resources/js/app.js，添加以下导入语句：

import 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
import 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js';
import 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js';

确保你的页面模板头部已经加载了前端构建资源：

<!-- Vite 环境 -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<!-- Mix 环境 -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

步骤3：排查验证

如果修改后还是不生效，打开浏览器F12开发者工具：

• 看「控制台」标签有没有$ is not defined、datepicker is not a function类的报错，确认JS资源是否加载成功、顺序是否正确
• 看「网络」标签有没有相关JS资源的404、加载失败提示
• 确认没有重复加载jQuery：如果Laravel全局已经默认加载了jQuery，不要再重复引入，避免冲突导致datepicker挂载失败

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