I followed one answer provided in AngularJS with Laravel 5 using NPM but I cannot successfully compile the SCSS files of lumx using Gulp.
Anyone knows how to fix this?
My app.scss contains this:
@import "../../../bower_components/mdi/scss/materialdesignicons";
@import "../../../bower_components/lumx/dist/scss/lumx";
After running gulp, I'm getting this error:
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 file contains
@import "bourbon";
@import "materialdesignicons";
@import "settings/colors";
@import "settings/defaults";
@import "settings/responsive";
My bower_components folder is in the root folder of my Laravel application.
All javascript files works with the Elixir tasks but only the scss files are having the problem.
I can able to integrate lumx with laravel.
into project folder
npm install
bower init
bower install lumx --save
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');
});
- create test.blade.php in resources/views/test.blade.php and config
<!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>
Route::get('/', function () {
return view('test');
});
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');
});
- update the file 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>
and run the command gulp again
For angular-material, material design lite, Material Design for Bootstrap and other framework, this it's valid
Source code is in Github
Excuse my English