Laravel Elixir：Gulp 不会编译 Bootstrap Sass 文件

Question

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

我设法编译了所有脚本，但 Gulp 不会编译 Bootstrap Sass 文件，即使它说 Finished 'sass' after 228 ms。这是我的 gulp 文件 atm:

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 Whosebug post 中所述，我检查了 Elixir 是否是最新版本并且它是（* 并且没有特定版本）。

有没有办法调试 Elixir？我还没有找到任何相关信息。

已在 this answer

中发布解决方案

Answer 1

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

根据 documentation，您的 scss 文件假定在 resources/assets/sass 中。 Elixir 的 bower 默认配置路径是 vendor/bower_components，这似乎也是您要指出的。如果您需要更改它，只需在项目的根目录中使用新的 bower 路径创建一个 elixir.json 文件。

{
  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 测试版包含一个 .bowerrc 文件，它告诉 bower 在 vendor 目录中安装库。在稳定安装中，我没有 .bowerrc 文件。希望这对您有所帮助！

Answer 2

另一种解决方案是使用此行来编译 sass 或更少的位于供应商文件夹中的文件：

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

注意：我使用 "composer require twbs/boostrap" 来获取完整的包。不需要凉亭。

编辑：

我将编译后的css文件输出到资源文件夹，以便与其他css文件合并：

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


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

Answer 3

解法：
这不是错误的路径，而是我误解了函数的文档。 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 文件。

完整的代码可以在 InvoicePlane repo at Github.

找到

Laravel Elixir：Gulp 不会编译 Bootstrap Sass 文件

Laravel Elixir: Gulp won't compile Bootstrap Sass files

twitter-bootstrap

laravel-5

laravel-elixir