Here is a live example:
http://alkharia.com/layout/index.html
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/less/app/core.less">
</head>
<body style="">
<!--[if lt IE 7]>
<div class="alert alert-danger">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
<![endif]-->
<header>
<section id="top-bar">
<div class="col-sm-6 col-sm-offset-4">
Login form
</div>
<div class="col-sm-2">
Create an account
</div>
</section>
</header>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/less.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body></html>
So I included the less.js file along with the core.less file
The core.less file @import url("../bootstrap/bootstrap.less"); the bootstrap.less file while the bootstrap.less file imports all the relevant less files.
If you look under the Developer's Tools in Chrome, all less files are being included including ALL the bootstrap.less files that I wanted to import. So they are importing properly, however, they are not styling anything.
I even tried just the @import "path/to/bootstrap.less"; as well and it imports it just like it was.. but not styling.
My core.less file:
@import url("../bootstrap/bootstrap.less");
//
// Variables
// --------------------------------------------------
// Scaffolding
// -------------------------
@body-bg: #1d2a37;
@text-color: #3b3b3b;
// Links
// -------------------------
@link-color: #67ae10;
@link-hover-color: darken(@link-color, 15%);
// Typography
// -------------------------
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: 'AR JULIAN', serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-serif;
@font-size-base: 1.2em;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: 1.6em
@font-size-h2: @font-size-h1 - 0.1;
@font-size-h3: @font-size-h1 - 0.2;
@font-size-h4: @font-size-h1 - 0.3;
@font-size-h5: @font-size-base;
@font-size-h6: @font-size-base - 0.1;
@line-height-base: 1.56;
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 400;
@headings-line-height: 1.1;
@headings-color: inherit;
I also tried removing all the variable overrides and just left the @import line, but it still just loaded the import files and not apply the styling.
HOWEVER, when I just <link> to bootstrap.less instead of going through my core.less file, it loads everything fine and the stylesheets get applied just fine. But of course, I want to be able to override bootstrap's variables.less file along with having my own stylesheet.
I'm doing @Adam's suggestion here : Bootstrap variable overriding with LESS
Thank you for any help..
