How to use Lumx in Laravel with Elixir?

问题

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.

回答1:

I can able to integrate lumx with laravel.

into project folder

npm install

bower init

bower install lumx --save

config 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');

});

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>

config routes/web.php

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

Now run the gulp command and open the project in the browser and you can see this
you can packet all js and ccs in one file

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

来源：https://stackoverflow.com/questions/35915446/how-to-use-lumx-in-laravel-with-elixir

标签

laravel

Sass

gulp

laravel-elixir

lumx