时间戳

首页 > 解决方案 > 在 Laravel 中集成自定义 HTML SASS 模板

javascript - 在 Laravel 中集成自定义 HTML SASS 模板

问题描述

我正在尝试在 Laravel 7 中集成自定义 html SaaS 模板。我已将模板 JS 和 CSS 文件放在公共目录中，并创建了一个主刀片，我在其中链接了这些 js 和 css 文件。但不知何故，它无法正常工作。我确实知道 app.js 文件存在一些问题，但我无法确定实际原因。如果有人能在这方面指导我，我将不胜感激。

CSS 文件路径：

<head>
    <meta charset="utf-8" />
    <title>{{ config('site_name')}} | Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- App favicon -->
    <link rel="shortcut icon" href="{{url('images/favicon.ico')}}">

    <!-- Bootstrap Css -->
    <link href="{{ url('css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="{{ url('css/icons.min.css')}}" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="{{ url('css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
    @yield('theme_style')
</head>

JS 文件路径：

<script src="{{url('libs/jquery/jquery.min.js')}}"></script>
<script src="{{url('libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{url('libs/metismenu/metisMenu.min.js')}}"></script>
<script src="{{url('libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{url('libs/node-waves/waves.min.js')}}"></script>

<!-- apexcharts -->
<script src="{{url('libs/apexcharts/apexcharts.min.js')}}"></script>

<script src="{{url('js/pages/dashboard.init.js')}}"></script>

<!-- App js -->
<script src="{{url('js/app.js')}}"></script>
@yield('theme_script')

刀片正在加载，但与某些 css 和 js 相关的功能无法正常工作。所有文件都正确链接并加载到视图页面源中。

注意：我也尝试使用“npm run dev”来编译文件。

标签： javascripthtmlcsslaravelsass

解决方案

我找到了这个问题的解决方案，实际上我正在使用 url() 辅助函数来链接 css/js 路径。我对文件进行了两项更改：

1) I put all files in a folder as it was placed in a default html template.
2) I used URL::asset() OR asset() helper function to link my files.

之后我清除缓存并运行项目。它刚刚奏效。

推荐阅读