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

Question

我要开始新的 Laravel项目与 v5.2我想用 Zurb Foundation v6.2 .

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

它也被添加到 composer.json 中:

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

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

非常感谢你的帮助。

Answer 1

我想 Laravel Elixir更适合这个目的。
从指南:

Installing Node

Before triggering Elixir, you must first ensure that Node.js is installed on your machine.

 node -v

By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page. Don't worry, it's quick and easy!

Gulp

Next, you'll want to pull in Gulp as a global NPM package like so:

 npm install --global gulp

Laravel Elixir

The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:

 npm install

然后安装 Foundation 6 for Sites 建议使用 Bower ，(另一个)包管理器，但专门用于管理面向前端的库，如 Foundation 和 jQuery。
你可以看看 Zurb's example template为了更好的理解。

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