Question

我正在创建具有自定义主题的Laravel Vuejs应用程序，无法获取要加载的CSS和js文件。请需要帮助。

因此，我使用AdminLTE进行了相同的教程，并且有效。因此，我决定使用第三方主题。这些是经过大量研究后所采取的步骤：

1）将所有资产文件移到资源文件夹中，并保持原始文件夹结构。原始HTML文件具有：

<link rel="stylesheet" 
href="../assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font- 
awesome.min.css">
<link rel="stylesheet" href="../assets/vendor/animate-css/vivify.min.css">
<link rel="stylesheet" href="../assets/vendor/c3/c3.min.css"/>
<link rel="stylesheet" href="../assets/vendor/bootstrap- 
datepicker/css/bootstrap-datepicker3.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="../html/assets/css/site.min.css">
......
<script src="../html/assets/bundles/libscripts.bundle.js"></script>
<script src="../html/assets/bundles/vendorscripts.bundle.js"></script>
<script src="../html/assets/bundles/c3.bundle.js"></script>
<script src="../assets/vendor/bootstrap-datepicker/js/bootstrap- 
datepicker.min.js"></script>
<script src="../html/assets/bundles/mainscripts.bundle.js"></script>
<script src="../html/assets/js/index8.js"></script>

2）在webpack.mix.js中，我添加了：

mix.js('resources/js/app.js', 'public/js')
   .js([
    'resources/assets/bundles/libscripts.bundle.js',
    'resources/assets/bundles/vendorscripts.bundle.js',
    'resources/assets/bundles/c3.bundle.js',
    'resources/assets/vendor/bootstrap-datepicker/js/bootstrap- 
    datepicker.min.js',
    'resources/assets/bundles/mainscripts.bundle.js',
    'resources/assets/js/index8.js'
   ], 'public/js/all.js')
 .sass('resources/sass/app.scss', 'public/css')
 .styles([
    'resources/assets/css/vendor/bootstrap/css/bootstrap.min.css',
    'resources/assets/css/vendor/font-awesome/css/font-awesome.min.css',
    'resources/assets/css/vendor/animate-css/vivify.min.css',
    'resources/assets/css/vendor/c3/c3.min.css',
    'resources/assets/css/vendor/bootstrap-datepicker/css/bootstrap- 
     datepicker3.min.css',
     'resources/assets/css/site.min.css' 
   ], 'public/css/all.css');

3）跑npm运行开发人员。没有错误。在html代码中用混合文件替换了旧的css和js文件：

 <link rel="stylesheet" href="/css/all.css">
 <script src="/js/all.js"></script>

4）打开应用程序，我得到的只是无法停止的加载微调器。当我从html删除微调器代码时，我得到的只是带有非常坏的css和jss的主题。

确实需要帮助，或者可能需要替代方法。提前致谢。

Answer 1

public/js/app.js和all.js中均缺少all.css。请使用以下代码：

mix.js('resources/js/app.js', 'public/js')
   .js([
    'resources/assets/bundles/libscripts.bundle.js',
    'resources/assets/bundles/vendorscripts.bundle.js',
    'resources/assets/bundles/c3.bundle.js',
    'resources/assets/vendor/bootstrap-datepicker/js/bootstrap- 
    datepicker.min.js',
    'resources/assets/bundles/mainscripts.bundle.js',
    'resources/assets/js/index8.js',
    'public/js/app.js'
   ], 'public/js/all.js')
 .sass('resources/sass/app.scss', 'public/css')
 .styles([
    'resources/assets/css/vendor/bootstrap/css/bootstrap.min.css',
    'resources/assets/css/vendor/font-awesome/css/font-awesome.min.css',
    'resources/assets/css/vendor/animate-css/vivify.min.css',
    'resources/assets/css/vendor/c3/c3.min.css',
    'resources/assets/css/vendor/bootstrap-datepicker/css/bootstrap- 
     datepicker3.min.css',
     'resources/assets/css/site.min.css',
     'public/css/app.css' 
   ], 'public/css/all.css');

Laravel Vuejs自定义Css和Js文件

1 个答案: