zoukankan      html  css  js  c++  java
  • laravel elixir

    npm install
    npm install jquery --save
    
    //bootsrap3.36 与 jquery3不兼容,下载jquery时可能需要确定版本号
    
    npm install jquery@2.x  --save

    编辑 resources/assets/sass/app.scss

    @import "variables";
    
    @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

    创建variables.scss,改写bootstrap样式变量

    $body-bg:               #FEFEFE;
    $brand-primary:         darken(skyblue, 6.5%);
    $panel-bg:              #AFEEEE;

    创建文件: resources/assets/js/app.js

    window.$ = window.jQuery = require('jquery');
    
    require('bootstrap-sass');
    
    $( document ).ready(function() { 
        console.log($.fn.tooltip.Constructor.VERSION);
    });

    以上为引入jquery, 引入bootstrap.js, console.log 记录bootstrap版本号(测试用)

    编辑项目根目录下的 gulpfile.js :

    var elixir = require('laravel-elixir');
    
    elixir(function(mix) {
        mix.sass('app.scss')
            .browserify('app.js')
            .version(['css/app.css', 'js/app.js']);
    });

    运行gulp生成文件,在app.blade.php里就可以进行引入了

    ...
    
    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">
    
    ...
    ...
    
    <script src="{{ elixir('js/app.js') }}"></script>
    
    ...

    如果使用less,建立app.less

    @import "node_modules/bootstrap-less/bootstrap/bootstrap.less";
    //@body-bg:   silver;
    @icon-font-path: "/fonts/bootstrap/";
    @import "node_modules/bootstrap-less/bootstrap/utilities.less";

    把gulpfile.js中更换sass未less即可

  • 相关阅读:
    ScriptOJ-flatten2#91
    ScriptOJ-unique#89
    ScriptOJ-safeGet#99
    测试
    SQL中常用的时间格式
    SQL Server -ISNULL()函数
    SQL Server -查看数据库扩展属性
    SQL Server 中创建数据库、更改主文件组示例
    SQL Server -SET QUOTED_IDENTIFIER
    SQL Server -SET ANSI_NULLS
  • 原文地址:https://www.cnblogs.com/fenle/p/5589345.html
Copyright © 2011-2022 走看看