Laravel Elixir：Gulp无法编译Bootstrap Sass文件。

Question

我从 Laravel 5、Elixir 和 Bower 开始，并遵循 laravel-news 上发布的指南。

我设法编译了所有脚本，但是 Gulp 不会编译 Bootstrap Sass 文件，即使它显示 Finished 'sass' after 228 ms。

这是我目前在 gulpfile 中的内容：

var paths = {
    'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}

elixir(function(mix) {
    mix.sass("style.scss", 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});

但是当我运行gulp时，没有包含css文件的css目录。
问题可能是什么？我真的不知道问题出在哪里。 我正在Mac OSX（10.10），MAMP上运行，并更新了所有应用程序、依赖项等。如this stackoverflow post所述，我检查了Elixir是否为最新版本（*而没有特定版本）。 有没有一种方法来调试Elixir？我还没有找到任何相关信息。

---

解决方案发布在this answer中

- Kevin Woblick

Answer 1

解决方案：
问题并不在于我找错路径，而是我误解了该函数的文档说明。 includePaths: 并不是告诉 Sass 将它们包含进 CSS 文件中，而是告诉 Sass 在哪里查找被 @import 导入的文件。

gulpfile.js

var bower_path = "./vendor/bower_components";
var paths = {
  'jquery'     : bower_path + "/jquery/dist",
  'bootstrap'  : bower_path + "/bootstrap-sass-official/assets",
  'fontawesome': bower_path + "/fontawesome"
};

mix.sass("app.scss", "public/assets/css", {
  includePaths: [
    paths.bootstrap + '/stylesheets',
    paths.fontawesome + '/scss'
  ]
});

resources/assets/sass/app.scss

@import "bootstrap";
@import "font-awesome";

使用这段代码，我能够编译CSS文件。

完整的代码可以在Github的InvoicePlane代码库中找到。

- Kevin Woblick

Answer 2

我认为问题出在你的路径上。

根据文档，你的scss文件应该在resources/assets/sass中。Elixir默认的bower配置路径是vendor/bower_components，这也是你似乎试图指向的路径。如果你需要更改它，只需在项目根目录中创建一个elixir.json文件，并设置新的bower路径即可。

{
  bowerDir: 'your/new/path'
}

Bootstrap的scss已经包含在Elixir的ingredients/sass.js中。

includePaths: [elixir.config.bowerDir + "/bootstrap-sass-official/assets/stylesheets"]

此外，您在sass()参数中包含了默认的CSS输出路径。因此，如果您的自定义SCSS文件是resources/assets/scss/style.scss，并且vendor/bower_components/bootstrap-sass-official/assets/stylesheets是有效路径，那么您只需要这样做。

elixir(function(mix) {
  mix.sass("style.scss");
});

它将编译您的scss文件到public/css中。根据我的经验，我的bower安装程序已经进入了/bower_components。我认为Laravel的beta版本包含了一个.bowerrc文件，告诉bower在vendor目录中安装库。在稳定的安装中，我没有.bowerrc文件。希望这可以帮助你！

- Grant

Answer 3

另一种解决方案是使用以下命令编译位于您的供应商文件夹中的Sass或Less文件：

mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less");

注意：我使用“composer require twbs/boostrap”获取完整的包。不需要bower。

编辑：

我将编译后的CSS文件输出到资源文件夹中，以便与其他CSS文件组合使用：

mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less", 'resources/css');


mix.styles([
    "bootstrap.css"
], 'public/css/app.css');

- Andréw L.