bootstrap less @import problem

Dieses Thema im Forum "Webdesign" wurde erstellt von onip, 29. Januar 2014 .

Schlagworte:
  1. 29. Januar 2014
    hallo zusammen,

    ich experimentiere etwas mit boostrap und less herum.
    ich steh da vor einem problem, was das arbeit erschwert.
    in der variables.less kann ich bequem meine änderungen vor nehmen.
    jedoch wird die änderung erst aktiv, wenn ich in bootstrap.less
    1. @import "variables.less"; entferne
    2. seite neu laden
    3. @import "variables.less"; wieder einfüge
    4. seite neu laden

    als test hab ich etwas kleines gebaut:
    bootstrap.less
    HTML:
    @import "variables.less";
    @import "grid.less";
    
    variables.less
    HTML:
    @width: 990px;
    @height: 550px;
    @border: 1px solid #ff0;
    
    grid.less
    HTML:
    .container{
     width: @width;
     height: @height;
     border: @border;
     margin: 0 auto;
    }
    
    html
    HTML:
    <!DOCTYPE html>
    <html lang="de">
     <head>
     <meta charset="utf-8" />
     <title>demo.less</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet/less" href="less/bootstrap.less" />
     <script src="js/less-1.6.1.min.js"></script>
     </head>
     <body>
     <div class="container">
     <div class="row">
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     </div>
     </div>
     </body>
    </html>
    
    der effekt ist der selbe

    schmeiß ich alles in bootstrap.less
    HTML:
    @width: 990px;
    @height: 550px;
    @border: 1px solid #f00;
    .container{
     width: @width;
     height: @height;
     border: @border;
     margin: 0 auto;
    }
    
    läuft's ohne probleme.
    kann es sein, dass @import gecached wird?
     
  2. 29. Januar 2014
    AW: bootstrap less @import problem

    Google: less import cache problem

    Erstes Ergebnis:
    Why does an imported css file get stored in localstorage and not refresh like a linked css file?
     
  3. 29. Januar 2014
    AW: bootstrap less @import problem

    peinlich, die arbeit hätte ich mir selbst machen können.
    danke.

    so geht's:
    HTML:
    <!DOCTYPE html>
    <html lang="de">
     <head>
     <meta charset="utf-8" />
     <title>demo.less</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet/less" href="less/bootstrap.less" />
     </head>
     <body>
     <div class="container">
     <div class="row">
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     </div>
     </div>
     <script type="text/javascript">
     var less=less||{};
     less.env='development';
     </script>
     <script src="js/less-1.6.1.min.js"></script>
     </body>
    </html>
    
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.