Laravel Elixir: Gulp не будет компилировать файлы Bootstrap Sass

Итак, я начал с Laravel 5, Elixir и Bower и следовал руководству, опубликованному на ларавел-новости.

Мне удалось скомпилировать все скрипты, но 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 и обновляю все приложения, зависимости и т. д.
Как указано в это сообщение о переполнении стека Я проверил, является ли Эликсир последней версией, и это (* и нет конкретной версии ).

Есть ли способ отладить Эликсир? Я ничего не нашел об этом.

Решение опубликовано в этом ответе


twitter-bootstrap laravel-5 laravel-elixir
person Kevin Woblick    schedule 04.02.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Решение:
Это был не неправильный путь, а скорее то, что я неправильно понял документацию функции. 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 на Github.

person Kevin Woblick    schedule 30.07.2015

arrow_upward
0
arrow_downward

Я думаю, проблема в вашем пути.

Согласно документации, предполагается, что ваш файл scss находится в resources/assets/sass. Путь конфигурации Elixir по умолчанию для Bower — vendor/bower_components, на что вы, похоже, тоже пытаетесь указать. Если вам нужно изменить его, просто создайте файл elixir.json в корне проекта с новым путем Bower.

{
  bowerDir: 'your/new/path'
}

Scss Bootstrap уже включен в ingredients/sass.js Elixir.

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

Кроме того, вы включаете путь вывода css по умолчанию в свой аргумент sass(). Поэтому, если ваш пользовательский файл 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. Надеюсь это поможет!

person Grant    schedule 06.02.2015

arrow_upward
0
arrow_downward

Другое решение использует эту строку для компиляции файлов sass или less, находящихся в папке вашего поставщика:

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

Примечание. Я использовал «композитор требует twbs/boostrap», чтобы получить полный пакет. Беседка не нужна.

Редактировать:

Я вывожу скомпилированный файл css в папку ресурсов, чтобы объединить его с другими файлами css:

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


mix.styles([
    "bootstrap.css"
], 'public/css/app.css');
person Andréw L.    schedule 21.02.2015