Results 1 to 6 of 6

Thread: chrome SASS debug info: source map

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    37
    Answers
    3
    Vote Rating
    4
      2  

    Default Unanswered: chrome SASS debug info: source map

    The new version of chrome canary add support from sass debugging
    Which will make styling a sencha touch app a much better experience

    see
    http://www.youtube.com/watch?v=x6qe_...ature=youtu.be

    I tried to follow a few tutorials to set it up
    http://benfrain.com/add-sass-compass...veloper-tools/
    http://fonicmonkey.net/2013/03/25/na...ome-and-rails/
    http://snugug.com/musings/debugging-sass-source-maps

    How ever I am not sure how to create the sass source map with compass and sencha.

    If someone you post an example of how to create the sass source map that would be great

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Answers
    501
    Vote Rating
    249
      0  

    Default

    While it doesn't create a true SASS source map you can do "sencha app build testing" which will create two different css files in the testing build folder. The -debug.css file will be the exploded / unminified css file with line numbers.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    3
    Vote Rating
    1
      0  

    Default

    The line comments are the first step, however there is also a debug property that needs to be set. In standard compass projects, you have to add this to the config.rb script:

    Code:
    sass_options = { :debug_info=>true }
    This will print out debug info using the @media declaration in the CSS. It's trivial to do in generic compass projects (just add the line to the config.rb), however, Sencha CMD doesn't seem to have this option.

    If there is a way to set this flag somewhere in the build process I'd be very interested to know as it'd cut theme development time down significantly. Is there a "master" config.rb script that developers can alter to achieve this?

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    3
    Vote Rating
    1
      1  

    Default

    So I have this working now, it's not as great as I'd like it to be since Ext-JS has a TON of mixins and other imports. However here is how to get it working.

    System Setup (versions here are important as Chrome 27+ only supports a certain type of source mapping)
    Ext-JS 4.2.1
    SASS (3.3.0.alpha.149)
    Compass (0.12.2)

    After that is established, go to your theme package and run
    Code:
    sencha package build
    This, more or less, builds a /build folder in your themes package. This build will also generate a
    Code:
    {theme-name}-all.scss
    which grabs all other mixins and includes needed to be compiled independently, this is crucial!

    Once that is done, you can run something like this:
    Code:
    sass --compass --sourcemap {theme-name}-all.scss:resources/{theme-name}-all.css
    Obviously change these to suit your environment. What this will do is build a compiled css file in the resources directory (which should be there), and it's important to compile there as all your images and other resources relatively linked to your stylesheet.

    From there I changed the index.html (should be in the root of your app) to point to this newly generated css file. Chrome also needs to be setup to use this information, however that is beyond the scope of this information.

    Hope this helps someone else!

  5. #5
    Sencha User kitedeskjames's Avatar
    Join Date
    Oct 2014
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Is there any word on the addition of sourcemap support? The last post I see referencing it is from 2014.

    I've tried the above and get about half way there, but there are too many issues with mixins and rb utilities.

  6. #6
    Sencha User
    Join Date
    Mar 2016
    Posts
    76
    Answers
    4
    Vote Rating
    25
      1  

    Default

    Any updates? Chrome still don't recognize those `source maps` that sencha cmd generate. I think most of yo generators can do this from the box today?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •