Bootstrap 3 + SASS

Question

I am using the sass release of bootstrap 3 with an MVC application.

When reviewing the styles with Google Chrome - inspector is referencing the less files. The only files referenced in the html pages is the bootstrap.css (i have not included any less files).

However for example looking at font-size on a button. It is referencing buttons.less and if you go to sources within Chrome you can navigate css/less and see all the less files (these files do not exist on the file system)

Why is Chrome referencing the less files (and not the SCSS files)? The map file was regenerated by visual studio 2013 update 4.

If i use FireFox (hitting the same mvc/html pages) it shows the references to the scss file appropriately.

So is there an issue with the map file (i am thinking no cause FireFox is able to read ok) why is Chrome referencing the less files?

thx

Answer 1

Your bootstrap.css file possible contains an inline source map compiled with Less.

See: http://lesscss.org/usage/#command-line-usage-options:

lessc --source-map-map-inline

This option specifies that the map file should be inline in the output CSS. This is not recommended for production, but for development it allows the compiler to produce a single output file which in browsers that support it, use the compiled css but show you the non-compiled less source.

An second source map comment possible point to your source map generated with Sass. The Chrome and FF show different results when referencing two different source maps in the same file.

I not sure why you should have to source maps in your file. If you import the CSS code compiled with Less in your Sass code this can happen maybe.