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

【问题标题】：Laravel Elixir: Gulp won't compile Bootstrap Sass filesLaravel Elixir：Gulp 不会编译 Bootstrap Sass 文件
【发布时间】：2015-04-04 13:19:03
【问题描述】：

所以我从 Laravel 5、Elixir 和 Bower 开始，并按照laravel-news 上发布的指南进行操作。

我设法编译了所有脚本，但 Gulp 不会编译 Bootstrap Sass 文件，即使它显示 Finished 'sass' after 228 ms。这就是我的 gulpfile 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 stackoverflow post 中所述，我检查了 Elixir 是否是最新版本，并且它是（* 并且没有特定版本）。

有没有办法调试 Elixir？我没有找到任何关于此的信息。

解决方案发布在this answer

【问题讨论】：

标签： twitter-bootstrap laravel-5 laravel-elixir

【解决方案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'
  ]
});

资源/资产/sass/app.scss

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

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

完整的代码可以在InvoicePlane repo at Github找到。

【讨论】：

【解决方案2】：

我认为问题在于你的路径。

根据documentation，您的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_components。我认为该教程所基于的 Laravel 测试版包含一个 .bowerrc 文件，该文件告诉 Bower 在 vendor 目录中安装库。在稳定安装中，我没有.bowerrc 文件。希望这会有所帮助！

【讨论】：

【解决方案3】：

另一种解决方案是使用这一行来编译位于您的供应商文件夹中的 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');

【讨论】：