Source Maps

Source Maps

per Jon Jack -
Nombre de respostes: 8

Anyone know how to integrate source maps into clean/clean based themes, it has already been done for the more theme. And there was a comment on the tracker https://tracker.moodle.org/browse/MDL-44597  about writing something up on how to do it,  but I can't find anything.

Mitjana de qualificacions: -
En resposta a Jon Jack

Re: Source Maps

per Jon Jack -

Here is an artical about source maps if anyone is interested. 

https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0

or if you want to try it, switch to the more theme and use the "inspect element" in chrome (make sure "Enable CSS source maps" is ticked in settings. You should be able to see the .less files where the styles are coming from, as well as the compiled css file. Quite useful I think.

En resposta a Jon Jack

Re: EDITED: Source Maps

per Mary Evans -
Imatge Core developers Imatge Documentation writers Imatge Peer reviewers Imatge Plugin developers Imatge Testers

You also need to enable Theme Designer Mode at least that is what MDL-44597 advocates.

I suspect that you need to use the methods employed in the More theme which compile LESS using PHP, so take a good look at the renderers and the lib.php as well as the LESS files as this is the only place I can think of where the code related to what you are looking for will be.

Cheers

Mary

EDIT:

https://github.com/lazydaisy/moodle/blob/master/theme/more/config.php#L32-L33

En resposta a Mary Evans

Re: EDITED: Source Maps

per Mary Evans -
Imatge Core developers Imatge Documentation writers Imatge Peer reviewers Imatge Plugin developers Imatge Testers

Hi Jon, I have just been looking at the More theme and found anextra setting in the more/config.php which I added in my previous comment (see EDIT)

Also this is related to the same thing in more/lib.php

So best thing to do is clone the More theme and make it your own and then the Source map thingy will/should work! Somrient

Easy peasy!

LOL

Mary

En resposta a Mary Evans

Re: EDITED: Source Maps

per Jon Jack -

Hi Mary,

I had a look at lib.php, but it all seem to relate to the settings,  I cant seem to find any reference to calling the source map file. Its a mystery Somrient

I did think about cloning more instead of clean, maybe I'll try this and see what happens.

cheers

Jon

En resposta a Jon Jack

Re: EDITED: Source Maps

per Mary Evans -
Imatge Core developers Imatge Documentation writers Imatge Peer reviewers Imatge Plugin developers Imatge Testers

You wont as it is now a feature built into Theme Designer Mode in Moodle 2.7, and so will only work with themes like More that are set up to use the php LESS compiler.

At least that is my understanding of it.

If you are not prepared to add the LESS functionality to your theme then it wont work will it?

Cheers

Mary

En resposta a Mary Evans

Re: EDITED: Source Maps

per Jon Jack -

yes, your right. as soon as my own less files were compiled, it wipes out the reference to the source map from more. Codekit 2 can create source maps but I dont know how to call them into a theme. I think I'll sit on this one for a bit. 

Cheers

Jon

En resposta a Jon Jack

Re: Source Maps

per Gareth J Barnard -
Imatge Core developers Imatge Particularly helpful Moodlers Imatge Plugin developers

Sorry for the delayed reply, Essential problems!

Ok, if your ok with using Grunt, then Shoelace (BS2.3.2) has source map capability -> https://github.com/gjb2048/moodle-theme_shoelace/blob/master/Gruntfile.js.  TDM does need to be off as the caching mucks up the mapping as it happens after the compilation and generation process.

This is all based off work done in the Bootstrap theme.