I know that this question was (kinda) aksed already in #2240137: Recommendation for Sourcemap Supported Susy/Compass Config but it was just a part of a question incorporatin Susy 2.
This is question on just getting Chrome show SASS line like the Firebug and FireSASS do for Firefox. This is (nearly) last obstacle but a huge one holding me still to Firefox and also a great drawback and time loss in Chrome.
To make question as short as possible while asking just the basic thing:
What is the minimal thing in order to have SASS produce SASS source maps that can help in CSS debugging in (latest, v36) Google Chrome?
I've read a lot and whatever I tried I ended up screwing up the whole thing and not getting any near source maps produced.
So what are dependencies in Gemfile (bundle install) needed to do so and what is gained and what is lost?
I'm not in grunt / node.js camp so I'm trying to do it pure gem style.
I am using guard and live reload but I'm willing to give that up for SASS file name / line number in inspect element.
| Comment | File | Size | Author |
|---|---|---|---|
| #1 | omega-sourcemaps.patch | 5.44 KB | jwilson3 |
Comments
Comment #1
jwilson3I just went through this setup myself, reported in gory detail here:
http://jwilson3.postach.io/add-source-maps-to-omega-4-x-projects
Here is a patch of the resulting changes required to get sourcemaps working.
If you already have a theme, and want to update it to use sourcemaps, you can apply it with
patch -p1 < omega-sourcemaps.patchfrom inside your custom theme directory.It will ask you which file you want to patch for the themename.styles.scss file and the themename.normalize.scss file.
Also, the patch can be applied inside the omega/starterkits/default/ folder using the same
patch -p1method mentioned above.After applying the patch you need to pull down the updated gems with:
And then recompile your css with:
Comment #2
jwilson3Note, the patch here includes fixes for the following problems already mentioned elsewhere, none of which have patches yet.
#2177397: Remove add_import_path 'sass' because it is not needed
#2232431: Compass installation on Mavericks still having problems
#2259101: @import "toolkit-no-css" generates compile error
Comment #3
macmladen commentedI must say this is single most valuable answer here I have ever seen: precise, quality and concise!
bundleris pretty smart so it is just sufficient to demand'compass', '~>1.0.0.rc.0'andbundle updatewill do the rest with dependencies.However, and this is a major thing, that is not enough without changes to
config.rb,themename.styles.scssandthemename.normalize.scssI can confirm that it even works with
guardandlive reloadalthough I've read a ton of posts that said it cannot be resolved. I preferdrush guardto simplecompass watchor even more tobundle exec compass compilewhich I never (needed) to use.There are some caveats: you must take care not to mix units as SASS 3.3 is more strict than 3.2 and there are some other changes and deprecations you should learn about. So you may end up with
error sass/theme.styles.scss (Line xxx of sass/......scss: Incompatible units: 'px' and 'rem'.)which you have to trace and change. The simple explanation is that you cannot addpixels toems and somewhereremas a unit does not work (some functions do not support it likeadd-grid()). On a relatively complex site I needed about an hour to fix those errors and compile successfully.I see no reason not to include this patch with next Omega release (if there is going to be one at all :( )
Comment #4
jwilson3Thanks for the compliment! ^
Woah, that is awesome. Should have tried that first. I'll also have a look at drush guard.
bundle exec compass compileis just the "safe" way that we know works in all platforms. (Sometimes running "compass compile" will use the wrong versions if you aren't using RVM and the other stack requirements, or have your environment setup with different versions of compass on the $PATH). Telling people to use "bundle exec" ensures they are using bundler, and that they're using the version of compass bundled with the theme, at the very least ;)Comment #5
fubhy commentedI am going to update the default starterkit to use the "new" toolkit file names and also enable sourcemaps. The rest of the patch provided won't make it in though because it's rather a problem with the Gems themselves. I am going to contact Snugug to fix toolkit 2.5.2 to also support Sass 3.4 which will make this work again without touching the Gemfile at all. Our Gemfile does not have a version restriction atm. which is something I did intentionally so people would benefit from the latest Gem versions whenever they do "bundle install" in a new project. This comes with the downside of running into problems whenever a particular Gem releases a new version which proofs incompatible with others in the list. This is the case right now and caused by Toolkit 2.5.2 not supporting Sass 3.4.
Stay tuned.
Comment #6
fubhy commentedhttps://github.com/Team-Sass/toolkit/pull/72
Comment #7
fubhy commentedI just fixed the default starterkit in http://cgit.drupalcode.org/omega/commit/?id=685c663
https://github.com/Team-Sass/toolkit/pull/74 now fixed the Toolkit Sass dependency to allow for Sass v3.4 which makes our Gemfile work again without changing anything.
Please try creating a new subtheme with 'drush owiz' using the default starterkit. I am going roll a new release once this has been confirmed to work.
Comment #8
jwilson3Uh, thanks for credit. :'( Also, if you mention the issue number in the commit message, you don't need to link to the commit in the issue queue, that is done automatically for you: https://www.drupal.org/node/52287, https://www.drupal.org/documentation/git/faq#back-links
Comment #9
fubhy commentedI know. That was just me being lazy while on the train. Sorry for not giving you credit. I did not have the issue open while fixing this because I didn't use the patch provided here due to the unneeded changes in the Gemfile. The wifi was too weak to go on an issue hunt. Same with the issue number. Next time....
Comment #10
fubhy commentedCan anyone confirm that this is working with 4.x-dev now? I would like to roll 4.3 for this.
Comment #11
macmladen commentedI can confirm that it is OK. I made a new Drupal installation, pulled
omega-4.x-dev, createdomega-newsubtheme usingdrush owizand then executedbundle installAfter fetching all needed
gemsand dependencies,compass compileproduced source maps as expected:Comment #12
macmladen commentedI included whole
bundlerlisting where you can see what is pulled new and what was used from previousomegasetup (though this may not be exact due to some of my previous testing).@Fubhy, it would be nice to have just
Gemfileand not any version declared, however, I am not sure that it will still be working some time from now. Thesegemsare changing like crazy and at some point people may get p*ssed as dependencies may be more broke that they would work. Until recently, it was nearly impossible to get source maps and work with omega (I tried that myself in May 2014 and failed) and kept trying until jwilson3 resolved change inconfig.rbwhich enabled the whole thing.I hope that this combination would continue to work but we will have to constantly monitor not to have some dependency broken.
As it is now, with this exact version of
gems, everything works.Comment #13
mrpauldriver commented@fuhby ref#10
The dev installed cleanly and reported no errors but I did later run in to problems with sass-globbing.
The current version is 1.1.1 but this seems to be broken. See http://drupal.stackexchange.com/questions/116157/file-to-import-not-foun... and https://github.com/chriseppstein/sass-globbing/issues/19 . Contrary to one comment, this is not just a Windows problem, I found the same on osx.
ref #12. Agree with @MacMladen
I am pretty new to all this sass and gem stuff, nor have I got my head around version control yet either. All in all it has been very steep learning curve! But you have to start somewhere and Omega has been the catalyst for me to up my game. (git is next on my list).
Recently I have been getting really confused when gems stop to be compatibile with each other or when their methods change. As far as Omega goes, I believe this is a barrier to entry and a pretty huge banana skin for anybody who is new to this stuff.
I think it would be a good idea to standardise on a collection of compatible gems and somehow make it harder for noobs to run bundle update and to potentially break things.
Experts would know how to tweak the config.rb file for advanced purposes, whilst us lesser mortals could enjoy a stable workflow and would be blissfully unaware of any issues.
Comment #14
macmladen commented...therefore, it would make sense to declare some versions in
Gemfilethat are tested and proved to work and to make progress in each release toward newer versions ofgems.New Omega release may be justified even for some gems change or smaller improvements, as we learn from all modern projects, the world seems to abandon great releases and focus on smaller but more rapid improvements (even WP does that).
Personally, I do not like this rapidness, I prefer solid and tested releases and do not like the need to update every week for some small thing I will never experience but then, when I face a problem I do get "itchy" why something is not fixed when it known for some time.
There I said it and I add that I am comfortable with Fubhy release pace although I am not too comfortable that project is still here after that ugly dispute with Jake, but that is another issue.
Comment #15
fubhy commentedI think I agree with #12 too. More experienced users can simply do/try a forceful update to the latest version and we can do new releases every now and then with the latest Gem versions.
Comment #16
macmladen commentedI'd add to that: ...latest
Gemversions that are tested and proved to work (although it may seem self evident but that is precisely why fubhy asked if those work because sometimes our special cases may not be the case for everyone and sometimes, yes, we are just too tired and cannot see the forest for the trees anymore.Comment #17
fubhy commentedSooo... Does someone want to provide a Gemfile that is more or less locked on a working combination of Gem versions? I am going to release 4.3 today so it's probably not going to make it in there but I still want to add this to prevent this from happening again in the future.
Comment #18
macmladen commentedThis issue is overcome by new Omega version 4.4 and by moving to
nodebased workflow (that raises new set of issues) I think we can assume this fixed.Comment #19
macmladen commented