Question

所以我开始使用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

中发布的解决方案

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'
  ]
});

资源/资产/ SASS / app.scss

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

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

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

Answer 2

我认为问题是你的道路。

根据documentation，您的scss文件被假定为resources/assets/sass。 Elixir的凉亭默认配置路径为vendor/bower_components，这也是您试图指向的内容。如果您需要更改它，只需在项目的根目录中创建一个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_components。我认为该教程基于的Laravel测试版包含一个.bowerrc文件，该文件告诉bower在vendor目录中安装库。在稳定的安装中，我没有.bowerrc文件。希望这有帮助！

Answer 3

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

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

注意：我使用＆＃34;作曲家需要twbs / boostrap＆＃34;获得完整的包裹。不需要凉亭。

编辑：

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

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


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

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

3 个答案: