时间戳

首页 > 解决方案 > Laravel 5.8 如何包含 node_modules

laravel-5 - Laravel 5.8 如何包含 node_modules

问题描述

我需要将tempusdominus datetimepicker包含到我的 Laravel 5.8 项目中，但我无法正确加载 scipts 和样式。

根据文档，我尝试将此行添加到我的 bootstrap.js 中。

try {
    window.$ = window.jQuery = require('jquery');

    mix.copy('node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css', 'public/css/tempusdominus.css');

    require('bootstrap');
    require('moment');
    require('tempusdominus-bootstrap-4');

    require('./main.js');
} catch (e) {}

Watcher 说所有内容都已成功编译，但控制台向我抛出错误$(...).datetimepicker is not a function，我在公共目录中看不到任何 tempusdominus css。

带有 $().datetimepicker 的脚本以这种方式通过文件末尾的部分包含在内。

@section('scripts')
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({
                locale: 'sk'
            });
            $('#datetimepicker2').datetimepicker({
                locale: 'sk'
            });
        });
    </script>
@endsection

我究竟做错了什么？

标签： laravel-5node-moduleslaravel-5.8

解决方案

首先，使用 NPM 安装 Bootstrap 4 和 Tempus Dominus 包。

npm i bootstrap
npm i tempusdominus/bootstrap-4

tempusdominus-bootstrap-4@5.1.2您应该在package.json文件中看到“ ”。

在你的app.js文件中添加这个：

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    window.TempusDominusBootstrap4 = require('tempusdominus-bootstrap-4');

    require('bootstrap');
} catch (e) {}

然后对于 CSS 将其添加到您的app.scss：

// Bootstrap
@import '~bootstrap/scss/bootstrap';

@import '~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4';

然后编译你的资产：

npm run prod

你现在应该做生意了，但不要忘记在你的 JS 中的某个地方......

$('#datetimepicker').datetimepicker(FUNCTION)

推荐阅读