Laravel 使用 UIkit

Question

我在本地 XAMPP 服务器上使用 composer

创建了新项目

composer create-project laravel/laravel ad dev-develop

然后我通过 composer 安装了 UIkit

composer require uikit/uikit

我在项目的 vendor 文件夹中得到了 UIkit

但是我不明白接下来我该做什么？如何在 css 文件中编译 uikit.less 以及我应该使用哪个文件夹来保存我的 css 文件？

Answer 1

您应该将最终的 css 文件放在 public 目录中的某处，例如 public/css.

要实现这一点，您应该安装 npm 和 gulp，现在您可以在 gulpfile.js 中编写类似的内容：

elixir(function (mix) {
    mix.less('uikit.less');
});

现在，当您运行 gulp 时，它将在 public/css 目录中创建 uikit.css 文件。您应该阅读 Laravel Elixir 以了解这里发生的事情。

您还应该确保您确实想要使用 Laravel 的 dev-develop 分支而不是 master。

编辑

如果你的 less 文件在不同的目录中，你应该这样做：

elixir(function (mix) {
     mix.less('../../../here-you-put-rest-of-path/uikit.less');
});

所以在你的情况下，路径应该是这样的：

../../../vendor/uikit/uikit/src/less/uikit.less

因为默认目录是 resources/assets/less 如果你想使用自定义目录你需要使用 ../ 走出这个目录并使用你的自定义目录（绝对路径似乎不起作用)

Answer 2

对于在 2019 年及以后有类似问题的人，我制作了一个 Laravel 6 兼容包，它将设置一个 UIkit 和 Vue.js 样板站点，以代替默认 Bootstrap 版本。

Laravel using UIkit