使用composer在Laravel 5中设置Zurb Foundation 6(sass)

Question

我正在用v5.2启动一个新的Laravel项目，我想使用Zurb Foundation v6.2。

我已经看到Zurb Foundation可以通过composer安装，并且由于我已经通过composer安装了Laravel，我认为这是一个好主意。我做到了，基金会在vendor(vendor/zurb/foundation(文件夹中。

它也被添加到composer.json:中

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

但现在，我该如何使用它？我应该在哪里创建css文件？在Laravel已经提供scss文件(app.scss(的resources/assets/sass文件夹中？如果是，我如何将其链接到Zurb基金会？

非常感谢你的帮助。

Answer 1

我认为Laravel Elixir更适合这个目的。

来自指南：

正在安装节点

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

 node -v

默认情况下，Laravel Homestead包括您需要的一切；然而，如果你不使用Vagrant，那么你可以通过访问他们的下载页面来轻松安装Node。别担心，它又快又容易！

Gulp

接下来，你会想把Gulp作为一个全球NPM包，就像这样：

 npm install --global gulp

Laravel Elixir

剩下的唯一步骤就是安装长生不老药！新安装Laravel后，您将在根目录中找到一个package.json文件。把它想象成你的composer.json文件，只是它定义了Node依赖项而不是PHP。您可以通过运行来安装它引用的依赖项

 npm install

然后要安装Foundation6forSites，建议使用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中，导入基础：

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

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

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

最后编译，运行：

gulp

Answer 2

我认为npm方式更适合前端的东西。看看这个：

http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html

如果你使用的是早期版本，它只是使用gullow而不是laravel混合物。