在 symfony 项目中集成 Coreui admin bootstrap 模板

Question

我正在尝试将 CoreUi Admin Bootstrap 模板集成到我的第一个 Symfony 项目中。

但我有一些问题。首先，侧边栏不起作用。我无法将其最小化。

我的控制台出现 JS 错误：

Action

代码中的动作：

<button class="header-toggler px-md-0 me-md-3" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
                <i class="icon icon-lg icon-2xl cil-menu"></i>
            </button>

Error console

这是我的项目树：

Project tree

我的app.js：

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

import '@coreui/coreui';
import '@coreui/icons';

import 'simplebar';

我的app.scss：

// @import "~bootstrap/scss/bootstrap";

@import "~@coreui/coreui/scss/coreui";
@import "~@coreui/icons";

$enable-ltr: true; /* stylelint-disable-line scss/dollar-variable-default */
$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */

// If you want to add custom CSS you can put it here.
@import "scss/custom";

我真的不明白缺少了什么:(

Answer 1

我通过将 JS 直接放在 footer.html.twig...

中解决了我的问题

我不明白为什么这不适用于 app.js，但现在可以了！

app.js :

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

app.scss :

// @import "~bootstrap/scss/bootstrap";

// If you want to add custom CSS you can put it here.
@import "../css/coreui.min.css";
@import "custom.css";

@import "../../public/vendors/simplebar/css/simplebar.css";

@import "../../public/vendors/@coreui/icons/css/free.min.css";

还有我的 footer.html.twig :

<footer class="footer">
    <div>
        <a href="">text</a>
        © 2022</div>
    <div class="ms-auto">
        <a href="">text</a>
    </div>
</footer>
</div>
<script src="/vendors/@coreui/coreui/js/coreui.bundle.min.js"></script>
<script src="/vendors/simplebar/js/simplebar.min.js"></script>
<script src="/vendors/@coreui/utils/js/coreui-utils.js"></script>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-coreui-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new coreui.Tooltip(tooltipTriggerEl)
})
</script>

在 symfony 项目中集成 Coreui admin bootstrap 模板

Integrate Coreui admin bootstrap template in a symfony project

sass

node.js

symfony

twitter-bootstrap