本文介绍了如何在Laravel和Elixir中使用Lumx?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遵循了使用NPM的Laravel 5中的AngularJS 中提供的一个答案,但是我无法使用Gulp成功编译lumx的SCSS文件.

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?

我的app.scss包含以下内容:

My app.scss contains this:

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

运行gulp后,出现此错误:

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文件包含

_lumx.scss file contains

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

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

我的bower_components文件夹位于Laravel应用程序的根文件夹中.所有的javascript文件都可以使用Elixir任务,但是只有scss文件有问题.

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.

推荐答案

我可以将lumx与laravel集成.

I can able to integrate lumx with laravel.

进入项目文件夹

bower初始化

bower install lumx --save

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');
    
    });
    • 在resources/views/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');
    });
    • 现在运行gulp命令并在浏览器中打开项目,您可以看到这个

    您可以将所有js和cc打包在一个文件中

    you can packet all js and ccs in one file

    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>
    • 并再次运行gulp命令

    • and run the command gulp again

    对于角材料,精简的材料设计,Bootstrap的材料设计和其他框架,这是有效的

    For angular-material, material design lite, Material Design for Bootstrap and other framework, this it's valid

    源代码位于 Github

    这篇关于如何在Laravel和Elixir中使用Lumx?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-29 13:47