Laravel6.X如何插入某个页面独有的CSS文件和JS文件？

当我们做项目的时候，有些页面独有的CSS和JS文件，例如A页面有共有的CSS文件，common.css，也有a.css文件，也有a.js文件。但这些文件在其他页面没有，这样的话我们如何在开发的环境下设置呢？你可以强制插入，例如在public文件夹里新建一个文件夹，然后在页面里插入。但这样不利于有条理地组织静态文件进行开发。在这篇文中介绍下一个方法：

1.在a页面也就是视图页面上做一个section, 我们通常会做一个@section('content'), 同样，我们也可以通过模板的@section @endsection方法进行插入。

例如在页面的任何一个部分插入

@section("styles") 
      <link rel="stylesheet" type="text/css" href="{{ asset('css/a.css') }}">
@endsection

这里的asset方法是在public文件夹下，也就是public/css/a.css。同样，我们也可以做下js的部分。

@section("js") 
      <script type="text/javascript" src="{{ asset('js/a.js') }}"></script>
@endsection

当然你可以添加很多个自定义的样式文件或者js文件。
然后layouts这个文件夹下面添加app.blade.php，这个文件通常会在脚手架生成的时候产生。然后把上面的css部分的代码放到css样式文件下面。像这样：

@yield('styles')

这个跟直接把视图文件片段插入到这里的方法是不同的。这时候我们一般用:

@include('users/index.php')；

注意区别。JS文件也是一样：

@yield('scripts')

2.利用laravel mix来进行开发整合

我们的静态文件应该放到resources文件加下面，例如resources/css/a.css, resources/js/a.js等。如果我们要用laravel mix来调试的话，我们需要用到mix里面的一个命令copyDirectory(), 例如：
.copyDirectory('resources/css/', 'public/css')；
放在webpack.mix.js里面，例如，

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
    .version()
    .copyDirectory('resources/css', 'public/css')
    .copyDirectory('resources/editor/js', 'public/js');

然后执行

npm run dev

这样就会把自定义的css和JS文件拷贝到public/css/和public/js文件夹下面。