CODEWITHSUNDEEP
twitter-bootstraplaravellesslaravel-5
laketuna
laketuna

Reputation: 4080

Laravel 5, Bootstrap, and Less

I'm just getting started with Laravel 5, and I followed this guide to install Bootstrap. It's my first time with Laravel, and I'm not familiar with responsive theming and related technologies.

I then went to Startbootstrap to try out one of the templates in the Laravel framework. I created a view for top bar of one of the templates by copying only the HTML, included http://mysite/js/bootstrap.js and http://mysite/css/bootstrap.css according to the guide, but when I rendered it on the browser (Firefox), I saw that classes like .navbar-header were being loaded from nav.less. I now do see that Laravel 5 originally comes with Less files, but they're outside of the public directory (mysite/resources/assets/less/bootstrap/), so they're not being used.

So my questions are..

  1. That guide I linked gave me the impression that Bootstrap did not come with Laravel 5, but it seems like the Less version does. Am I supposed to use a Less compiler for the files at mysite/resources/assets/less/bootstrap/ if I wanted to use Bootstrap that came with Laravel 5?

  2. The path mysite/css/less/navbar.less shown in the browser doesn't actually exist in my installation. Furthermore, the CSS is actually coming from http://mysite/css/bootstrap.css. How did the browser generate mysite/css/less/navbar.less? See https://www.evernote.com/l/Ak-3I6SiUlhBd6Y_4NiX10LgrMt0vccqjiI .

Upvotes: 2

Views: 4691

Answers (1)

Bogdan
Bogdan

Reputation: 44526

It looks like the LESS was compiled with source maps enabled and it seems that the Chrome Enable CSS source maps is also active. That's why you're seeing the actual mapped rule from the LESS file. The following article explain how that works and how to disable it:

Debug LESS with Chrome Developer Tools

In Firefox you can disable the CSS source mapping in the Developer Tool options, under the section Style Editor uncheck Show original sources. Also here's a good article that explains how source maps work (although it uses JS source maps as examples, the concept is the same).

The Bootstrap files that came with Laravel have no direct connection to the CSS files that you downloaded. In your public/css/ directory you will have a bootstrap.css file, as well as a bootstrap.css.map file. If you open the bootstrap.css file you'll see that at the end of the file there is a line:

/*# sourceMappingURL=bootstrap.css.map */

That tells the browser that there there is a source map file with that name, that contains mappings from the compiled CSS to the source code which was written in LESS.

If you open the bootstrap.css.map you'll see that, while most of it is gibberish for handling the mappings, at the very beginning there is an array of source paths that lists the LESS files that were compiled to form the CSS file. That is what the browser is reading and showing you in the CSS inspector. It doesn't really know what you have on your server, it just knows from the source map file that the rule for the .navbar-header class was defined in the nav.less file before it was compiled to CSS. This is to make it easier to find rule definitions after compilation.

Upvotes: 4

Related Questions