Как использовать Lumx в Laravel с Elixir?

Я последовал за одним ответом, указанным в AngularJS with Laravel 5 using NPM, но я не могу скомпилировать файлы SCSS из lumx с помощью Gulp.Как использовать Lumx в Laravel с Elixir?

Кто-нибудь знает, как это исправить?

Мой app.scss содержит это:

@import "../../../bower_components/mdi/scss/materialdesignicons"; 
@import "../../../bower_components/lumx/dist/scss/lumx";

После запуска глотка, я получаю эту ошибку:

gulp-notify: [Laravel Elixir] Sass Compilation Failed: bower_components\lumx\dist\scss\_lumx.scss 
    Error: File to import not found or unreadable: bourbon 
      Parent style sheet: D:/laragon1.0.6/www/task-manager/bower_components/lumx/dist/scss/_lumx.scss 
      on line 5 of bower_components/lumx/dist/scss/_lumx.scss 
    >> @import "bourbon";

_lumx.scss файл содержит

@import "bourbon"; 
@import "materialdesignicons"; 

@import "settings/colors"; 
@import "settings/defaults"; 
@import "settings/responsive";

Мои bower_components папка находится в корневой папке моего приложения Laravel. Все файлы javascript работают с задачами Elixir, но возникают только файлы scss.

источник

2016-03-10 philxtian

Я могу интегрировать люмп с laravel.

в папку проекта

npm install

bower init

bower install lumx --save

конфигурации gulpfile.js

elixir((mix) => { 
 
    //mix.sass('app.scss'); 
 
    //mix.webpack('app.js'); 
 
    mix.styles('./bower_components/lumx/dist/lumx.css'); 
 
    mix.styles('./bower_components/mdi/css/materialdesignicons.css'); 
 
    mix.scripts('./bower_components/jquery/dist/jquery.js'); 
 
    mix.scripts('./bower_components/velocity/velocity.js'); 
 
    mix.scripts('./bower_components/moment/min/moment-with-locales.js'); 
 
    mix.scripts('./bower_components/angular/angular.js'); 
 
    mix.scripts('./bower_components/lumx/dist/lumx.js'); 
 
    mix.copy('./bower_components/mdi/fonts', 'public/fonts'); 
 

 
});

создать test.blade.php в ресурсах/просмотров /test.blade.php и конфигурации

<!DOCTYPE html> 
 
<html lang="en" ng-app = "myModule"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Laravel Lumx</title> 
 
<link rel="stylesheet" href="{{ asset('css/lumx.css') }}"> 
 
<link rel="stylesheet" href="{{ asset('css/materialdesignicons.css') }}"> 
 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> 
 
</head> 
 
    <body> 
 
    <div class="p+"> 
 
    Hello 
 
    </div> 
 
    <div class="p+"> 
 
     <lx-button lx-type="raised">Button</lx-button> 
 
     <lx-button lx-type="flat">Button</lx-button> 
 
     <lx-button lx-type="fab"><i class="mdi mdi-plus"></i></lx-button> 
 
     <lx-button lx-type="icon"><i class="mdi mdi-plus"></i></lx-button> 
 
    </div> 
 
    
 
    <div class="p+"> 
 
     <lx-switch ng-model="vm.switches.colors.blue" lx-color="blue">Blue switch</lx-switch> 
 
     <lx-switch ng-model="vm.switches.colors.green" lx-color="green" class="mt+">Green switch</lx-switch> 
 
     <lx-switch ng-model="vm.switches.colors.orange" lx-color="orange" class="mt+">Orange switch</lx-switch> 
 
     <lx-switch ng-model="vm.switches.colors.red" lx-color="red" class="mt+">Red switch</lx-switch> 
 
    </div> 
 

 
    <script src="{{ asset('js/jquery.js') }}"></script> 
 
    <script src="{{ asset('js/velocity.js') }}"></script> 
 
    <script src="{{ asset('js/moment-with-locales.js') }}"></script> 
 
    <script src="{{ asset('js/angular.js') }}"></script> 
 
    <script src="{{ asset('js/lumx.js') }}"></script> 
 
    <script> 
 
     angular.module('myModule', ['lumx']); 
 
    </script> 
 

 
    </body> 
 
</html>

конфигурации маршруты/web.php

Route::get('/', function() { 
 
    return view('test'); 
 
});

Теперь запустите команду глотка и откройте проект в браузере, и вы можете увидеть this
вы можете пакетные все JS и ЕТ в одном файле

config the gulpfile.js

elixir((mix) => { 
 
    //mix.sass('app.scss'); 
 
    //mix.webpack('app.js'); 
 
    mix.styles([ 
 
     './bower_components/lumx/dist/lumx.css', 
 
     './bower_components/mdi/css/materialdesignicons.css' 
 
    ], 'public/css/lumxall.css'); 
 
    mix.scripts([ 
 
     './bower_components/jquery/dist/jquery.js', 
 
     './bower_components/velocity/velocity.js', 
 
     './bower_components/moment/min/moment-with-locales.js', 
 
     './bower_components/angular/angular.js', 
 
     './bower_components/lumx/dist/lumx.js' 
 
    ], 'public/js/lumxall.js'); 
 
    mix.copy('./bower_components/mdi/fonts', 'public/fonts'); 
 

 
});

обновите файл test.blade.PHP

<!DOCTYPE html> 
 
<html lang="en" ng-app = "myModule"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Laravel Lumx</title> 
 
<link rel="stylesheet" href="{{ asset('css/lumxall.css') }}"> 
 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> 
 
</head> 
 
    <body> 
 
    <div class="p+"> 
 
    Hola 
 
    </div> 
 
    <div class="p+"> 
 
     <lx-button lx-type="raised">Button</lx-button> 
 
     <lx-button lx-type="flat">Button</lx-button> 
 
     <lx-button lx-type="fab"><i class="mdi mdi-plus"></i></lx-button> 
 
     <lx-button lx-type="icon"><i class="mdi mdi-plus"></i></lx-button> 
 
    </div> 
 

 
    <div class="p+"> 
 
     <lx-switch ng-model="vm.switches.colors.blue" lx-color="blue">Blue switch</lx-switch> 
 
     <lx-switch ng-model="vm.switches.colors.green" lx-color="green" class="mt+">Green switch</lx-switch> 
 
     <lx-switch ng-model="vm.switches.colors.orange" lx-color="orange" class="mt+">Orange switch</lx-switch> 
 
     <lx-switch ng-model="vm.switches.colors.red" lx-color="red" class="mt+">Red switch</lx-switch> 
 
    </div> 
 

 

 
    <script src="{{ asset('js/lumxall.js') }}"></script> 
 
    <script> 
 
     angular.module('myModule', ['lumx']); 
 
    </script> 
 

 
    </body> 
 
</html>

и запустите команду глотку снова
Для углового-материала, дизайн материала облегченного, материал Дизайна для загрузки и других структур, это она действует
Исходный код находится в Github

Excuse my English

источник

2017-01-11 18:56:48

ответ

Смежные вопросы