使用作曲家在Laravel 5中设置Zurb Foundation 6(sass)

Question

我正在开始一个新Laravel项目,v5.2我想使用Zurb Foundation v6.2.

我见过Zurb基金会可通过安装composer,因为我已经安装了Laravel通过composer,我认为这是一个好主意.我做到了,基金会在vendor(vendor/zurb/foundation)文件夹中.

它也被添加到composer.json中:

"require": {
    "php": ">=5.5.9",
    "laravel/framework": "5.2.*",
    "zurb/foundation": "^6.1"
},

但现在,我该如何使用它？我应该在哪里创建我的css文件？在resources/assets/sassLaravel已经提供scss文件(app.scss)的文件夹中？如果是这样,我如何将其链接到Zurb Foundation？

非常感谢你的帮助.

Answer 1

我认为Laravel Elixir更适合这个用途。

来自指南：

安装节点

在触发 Elixir 之前，您必须首先确保您的计算机上安装了 Node.js。

 node -v

默认情况下，Laravel Homestead 包含您需要的一切；但是，如果您不使用 Vagrant，那么您可以通过访问其下载页面轻松安装 Node。别担心，它又快又简单！

咕噜咕噜

接下来，您需要将 Gulp 作为全局 NPM 包引入，如下所示：

 npm install --global gulp

Laravel Elixir

剩下的唯一步骤就是安装 Elixir！新安装 Laravel 后，您将在根目录中找到一个 package.json 文件。可以将其视为您的composer.json 文件，只不过它定义的是 Node 依赖项而不是 PHP。您可以通过运行以下命令来安装它引用的依赖项：

 npm install

然后，要安装Foundation 6 for Sites，建议使用Bower（另一个）包管理器，但专门用于管理 Foundation 和 jQuery 等面向前端的库。

您可以查看Zurb 的示例模板以更好地理解。

npm install --global bower

创建一个名为bower.json：

{
  "name": "my-site",
  "dependencies": {
    "foundation-sites": "~6.1.2",
    "motion-ui": "~1.1.0",
    "foundation-sites": "~6.2.0",
    "motion-ui": "~1.2.2"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "private": true
}

然后跑bower install。

在 中app.scss，导入 Foundation：

@import 'foundation';
@include foundation-everything;

然后在 中gulpfile.js，将其编译为 CSS：

mix.sass('app.scss', 'public/css/app.css', {
  includePaths: [
      'bower_components/foundation-sites/scss/'
  ]
});

最后编译，运行：

gulp