文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Laravel中使用Lumx和药剂？

问如何在Laravel中使用Lumx和药剂？
EN

Stack Overflow用户

提问于 2016-03-10 11:39:21

回答 1查看 244关注 0票数 0

我遵循了基于NPM的AngularJS与Laravel 5中提供的一个答案，但我无法使用Gulp成功地编译lumx的SCSS文件。

有人知道怎么解决吗？

我的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文件有问题。

laravel

sass

gulp

laravel-elixir

lumx

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-11 18:56:48

我能把朗姆士和拉拉结合起来。

进入项目文件夹

npm安装鲍尔 bower安装lumx --保存

配置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');

});

在资源/view/test.blde.php和config中创建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和ccs打包到一个文件中。

配置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中

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35915446

复制

相似问题

问如何在Laravel中使用Lumx和药剂？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Laravel中使用Lumx和药剂？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Laravel中使用Lumx和药剂？
EN