将模板的 css 和 js（来自供应商）链接到我的视图

Question

当我在公共文件夹中添加模板时，这有效但是我要求的是正确的做事方式。

我创建了一个新的 laravel 项目，我想使用 Adminlte 3 作为模板，所以我运行了我在文档中找到的这个命令：

composer require "almasaeed2010/adminlte=~3.1"

响应（我认为最后两行可能有用）

./composer.json has been updated
Running composer update almasaeed2010/adminlte
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking almasaeed2010/adminlte (v3.1.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading almasaeed2010/adminlte (v3.1.0)
  - Installing almasaeed2010/adminlte (v3.1.0): Extracting archive
Package swiftmailer/swiftmailer is abandoned, you should avoid using it. Use symfony/mailer instead.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/sanctum
Discovered Package: laravel/tinker
Discovered Package: laravel/ui
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
77 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
No publishable resources for tag [laravel-assets].
Publishing complete.

我发现我的供应商文件夹中添加了一个新文件夹。
一切都正确下载，所以我尝试创建一个包含仪表板所有重复元素的母版页，但是我使用的链接不是动态的，所以我不确定如果视图位于不同的目录级别是否会导致问题。例如：

这是指向 css 的 Admin lte 3 链接：

  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">

我是怎么称呼它的：

  <link rel="stylesheet" href="{{ require('C:\Users\Yasser-Ch\Desktop\LaravelProject\gestionDivers\vendor\almasaeed2010\adminlte\dist\css\adminlte.min.css') }}">

这使得页面看起来像 css 文件，所以试着把它放在 resources\css\app.css 当然它没有工作，因为 css 不是 .blad.php ，所以我想也许作曲家（因为在文档中准确地说：

供应商目录包含您的 Composer 依赖项。

) 或其他东西可以解释它并只从“vendor\almasaeed2010”（一般模板）中放入我需要的东西，并将其放入 2 个文件中，1 个用于 css，1 个用于 js……我做了一些研究和我找到了混合......
所以我尝试了这个：

  {{ mix.postCss('\vendor\almasaeed2010\adminlte\dist\css\adminlte.min.css', 'public/css') }}
  <link rel="stylesheet" href="adminlte.min.css">

然后我运行这些命令：

  npm install // to download mix that is by default already required in the package.json 
  npm run dev // and here I expect mix to start mixing

我检查 public/css 只添加了 app.css 。当我使用php artisan serve 重新运行该网站时，我收到一条错误消息，提示混合未定义。
我的意思是混合在npm run dev 期间没有导致错误。如果它完成了混合工作，我会删除它在启动服务器之前。 如何链接供应商的 css/js？我应该在公用文件夹中发布所有内容吗？ 因为我认为他们将模板放在供应商文件夹中的事实意味着它不应该直接放在公共目录中。

Answer 1

你可以使用 webpack，检查文件 webpack.mix.js 添加或搜索如下行

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/css')

// in 'app.scss
// import all necessary css files 
@import 'vendor\almasaeed2010\adminlte\dist\css\adminlte.min.css'

如果从来没有运行npm install，则运行npm run dev 或npm run prod。 它将在public/css 中创建app.css

<link href="{{ asset('css/app.css') }}" rel="stylesheet">