Advice on Theme development workflow - css source maps

Technical Support
  • I'd like to be able to enable generation of css source maps so that I can identify which less file a rule is defined in. For example, the .btn class has padding defined as '10px 16px'. I'd like a workflow which allows me to quickly figure out which less file contains that rule, without having to manually search for it. I have show 'show original sources' enabled in the firefox dev tools but also need to tell nodeBB to generate the source maps or generate them myself.

    The button padding seems to come from the bootstrap mixin:

    .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
      padding: @padding-vertical @padding-horizontal;
      font-size: @font-size;
      line-height: @line-height;
      border-radius: @border-radius;

    During development, I'd also like nodeBB to re-generate css based on changes I make to less files. For now I am running nodebb dev, editing a less file and then manually reloading the forum in the admin panel.

    All advice appreciated - hopefully this will be useful to others. I searched for 'source maps' but didnt get any relevant hits.

Suggested Topics