3

所以我从 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 上运行并更新了所有应用程序、依赖项等。
正如这个 stackoverflow 帖子中所述，我检查了 Elixir 是否是最新版本并且它是（*并且没有特定版本）。

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

此答案中发布的解决方案

4

3 回答 3

2

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

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

于 2015-07-30T10:06:20.243 回答
0

我认为问题是你的路径。

根据文档，您的 scss 文件假定位于resources/assets/sass. Elixir 的 bower 默认配置路径是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 的 beta 版本包含一个.bowerrc文件，该文件告诉 bower 在vendor目录中安装库。在稳定安装中，我没有该.bowerrc文件。希望这可以帮助！

于 2015-02-06T09:45:04.823 回答
0

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