Problem/Motivation
Switch Omega from Ruby based SASS to LibSASS.
Proposed resolution
How to test the “omega-switch-to-libsass-2537364-57.patch”.
1. Apply the omega-switch-to-libsass-2537364-57.patch.
2. Edit the “proxy: "127.0.0.1/your_drupal_root_folder"” in the gulpfile.js, to match your Drupal root folder.
3. Install gulp globally. sudo npm install --global gulp
.
4. In the root directory of the theme run npm install
.
5. In the root directory of the theme run find node_modules -type f -name '*.info' | xargs rm
.
6. Import the following at the top of your theme.style.scss:
@import "singularitygs";
@import "compass";
@import "breakpoint";
@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";
7. In the root directory of the theme run gulp
or better sudo gulp
.
8. Navigate to http://localhost:3000/your_drupal_root_folder.
Remaining tasks
User interface changes
API changes
Data model changes
Original report
Thanks to fubhy for switching the starterkit to LibSass. If anybody considers to switch from the current sub theme to the new on, here some informations fubhy gave in the parent ticket. Would be nice to collect the experiences people have on migrating away from the ruby based starterkit to the new one based on LibSass.
From #2201679: SASS compile time at a full minute! #8:
First and foremost you are probably going to have problems with dependencies you built your Sass around with the previous starterkit... Namely stuff like Compass, Singularity/Susy, etc. .... Oh wait, let me just put together a quick list of things you might want to look at if you choose to migrate (it's definitely possible but tough to say for me whether it will end up being complicated in your specific case).
1. Copy the new/changed files from the starterkit's root directory to your theme and remove all the old stuff from your theme (e.g. Gemfile, config.rb, package.json, .ruby-version, Guardfile, etc.). Take the files from the new default starterkit (e.g. gruntfile.js, package.json, ...) and copy them over to your theme (if you added any npm packages, make sure you copy them over from the old package.json).
2. Remove the old node_modules directory and do a fresh "npm install".
3. As mentioned... Compass/Susy/Singularity etc. (basically all the ruby gems you are currently using, if any). Try to look out for things like https://github.com/Igosuki/compass-mixins ... You are not the only one migrating away from ruby gems for these mixin libraries so it's very likely that you will find resources for all sorts of things.
4. Adjust your styles.scss and normalize.scss: Globbing (import with **/*.scss) does not work in libsass and there is no sass-globbing plugin as there was for the ruby preprocessor. Hence, you now need to explicitly @import all your partials yourself (check your styles.scss file for that, there should a few **/*.scss-style imports). Then, according to #3, migrate away from compass/singularity mixin usage or find compatible non-ruby replacements for these.
5. In order to run gulp, either use your global gulp-cli (if installed) or run the package.json scripts (e.g. "npm run sass:dev") --> watches your /sass folder for changes and compiles the .scss with libsass using gulp.
Comment | File | Size | Author |
---|---|---|---|
#57 | omega-switch-to-libsass-2537364-57.patch | 3.73 KB | vagelis-prokopiou |
#55 | omega-switch-to-libsass-2537364-55.patch | 2.91 KB | steinmb |
Comments
Comment #1
osopolarBTW: Singularity seems to be compatible with LibSass.
Comment #2
xzyfer CreditAttribution: xzyfer commentedHi, I'm part of the core LibSass team. Please feel free to reach with any questions you have. You can best reach me on twitter.com/xzyfer.
FWIW the majority or major Sass libraries including Susy/Singularity are fully compatible with LibSass 3.2+.
Although globbing importers do exists in nodes-sass (and are possible as C extension) we currently recommend against them due to a know issue on our custom importers.
Comment #3
fubhy CreditAttribution: fubhy commentedThanks, I wasn't aware that Singularity works already as I've not been using any grid frameworks whatsoever in a while. Good to know!
Also, thanks for the offer xzyfer. Appreciated!
Comment #4
csedax90 CreditAttribution: csedax90 commentedHello, i'm trying to switching to libsasss but I've some problems to undertand how it works. I've followed your guide and replaced all new files, now I've edited package.json width 2 new rows:
"compass-mixins": "^0.12.6",
"susy":"~2.2.2"
after doing this I gave the command again: npm install and below: npm run sass: dev
buon now, how can I import those libraries in my style.css? I've tried with @include "compass-mixins" but it doesn't work... thanks
Comment #5
fubhy CreditAttribution: fubhy commentedCheck out https://github.com/sass/node-sass#includepaths. You will have to modify the contained gulpfile.js after installing new node packages (much like you had to put e.g. "require susy;" in the config.rb with the Ruby preprocessor).
Comment #6
csedax90 CreditAttribution: csedax90 commentedok I was able to make it all work, but I think there are some logical errors in the current version.
A frontend developer who is using Omega uses it also for the functionality of its layouts, which at the time without any modifications to the various file gulp, etc ... is unable to do.
I think at least in the Libsass starterkit we should includes the two required dependencies susy and breakpoint-sass immediately, so that they can be available to compile without change anything.
Normally a user also uses or Compass or Bourbon, so it would be interesting to provide one or the other library already as a dependency.
Another thing, I had trouble "reading" of the sub-file once the folder is created layouts / simple, the file gulp.js not read the new files in the folder.
To resolve I had to edit the file gulp.js as follows:
Now I'm using Omega 4.4 with Libsass, Bourbon (i've finally replaced Compass), Susy (with Omega Layouts) and Breakpoint, and all is working fine. I attach my configuration if someone wants to try:
package.json
gulpfile.js
THEMENAME.styles.scss
simple.layouts.scss
Comment #7
krystianbuczak CreditAttribution: krystianbuczak commentedAs fubhy said:
that's true, but we have also NOT fully functional plugin called Gulp CSS globbing Plugin name is misleading, but for sure it works for scss files too.
Not fully means:
@import "variables/**/*";
I tried successfully this gulp (gulpfile.js) configuration:
Now I can import partials in [theme].styles.scss
It seems we are much closer in switching environment to libsass.
Comment #8
steinmb CreditAttribution: steinmb as a volunteer commentedI'm not switching, jumping strait to libsass though I am still trying to connect the dots. Does any documentation exist for this?
Comment #9
mesnitu CreditAttribution: mesnitu commentedbower, grunt, gulp, json, npm, rvm, ruby, libsass, susy, bordon, singularity, compass, to globb or not to globb.....
Sometimes I miss the good old > touch style.css
Subscribing
Comment #10
fubhy CreditAttribution: fubhy commentedYou can pretty much cross out Bower, Grunt, RVM, Ruby, Susy, Singularity, Compass, etc. from this list now. I've found that really all you need is LibSass and npm and some sort of task manager (in some cases) for which I'd use Gulp.
I personally don't use globbing either.
Comment #11
mesnitu CreditAttribution: mesnitu commentedEDIT: Just the layouts
Well, I've used the all the information gather in here, but, it doesn't make new files for layouts....
Something am I missing something, or is there another way of doing it now ?
My config so far :
gulpfile
package.json
No layouts, no fun
Another thing: I haven't comment this line .pipe(sourcemaps.init()) (about the config#7), but I got no errors, so not sure if it is ok.
Thanks
Comment #12
mesnitu CreditAttribution: mesnitu commentedSorry, my fault. It's creating files and layout files.
It was the @import "../../variables/**/*" in the layouts scss, that was not letting the file creation.
EDITED
So in the layouts @import "../../variables/_file.scss" works, witch is enough for me.
Glad that Omega can work now with libsass, for what I've seen so far, it's a big time difference in compiling
Thanks to all for sharing
Comment #13
krystianbuczak CreditAttribution: krystianbuczak commentedAFAIK in my configuration generated maps were incorrect, that's why commented out.
Comment #14
mesnitu CreditAttribution: mesnitu commentedWell, for some reason, I can't use the globbing and the paths to include the layouts at the same time.
I dump the gobbing. Perhaps someone can find a way to have both.
Comment #15
steinmb CreditAttribution: steinmb as a volunteer commentedWe prob. should get starting documenting how to create and how to port in https://www.drupal.org/node/1768686 -somewhere?
Comment #16
nicobot CreditAttribution: nicobot as a volunteer commentedHey there! I've managed to use globbing successfully in my scss files using the libsass importer and the node-sass-globbing package.
Here is what I did:
- I've installed the Node Sass Globbing package through npm
npm install node-sass-globbing
Or add this line to package.json and run "npm install":
"node-sass-globbing": "0.0.23",
- Then I've modified gulpfile.js with the following:
I hope it helps!
Comment #17
mesnitu CreditAttribution: mesnitu commentedwith node-sass-globbing I get no errors, but no $var are passed to theme-style.scss........
You get this working, and also, creating layouts "on the fly" ?
Comment #18
nicobot CreditAttribution: nicobot as a volunteer commentedHi mesnitu,
I'm not sure what you mean, but I can import all variables defined in /variables/*.scss files.
Maybe this helps out... I have in my theme-style.scss, something like:
@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";
I'm adding the "sass/" prefix, because gulp was sending as relative path "." which was the "theme/" directory instead of "theme/sass/".
I hope it helps !
Comment #19
mesnitu CreditAttribution: mesnitu commentedI think I posted a thanks to nicobot , but for some reason it doesn't show.
Anyway, Thanks ! It was the path.
Comment #20
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedThis is how I managed to set up Singularitygs (+ Singularity-extras) + Breakpoint + Compass with Gulp.
First: Install gulp globally.
sudo npm install -g gulp
Second: Copy the following package.json to the root folder of your project.
Third:
cd
in the directory and runnpm install
.Fourth: If you encounter any errors with Drupal and browserSync (white screen of death or segmentation fault), you can run this command in the root folder of your theme:
find node_modules -type f -name '*.info' | xargs rm
This removes the .info files of the node_modules, which create problems with Drupal.
See also: http://drupal.stackexchange.com/questions/126880/how-do-i-prevent-drupal...
Fifth: Edit the gulpfile.js like this:
Sixth: Require the following at the top in your "theme.styles.scss":
@import "singularitygs";
@import "compass";
@import "breakpoint";
Seventh: Don't forget to include each and every partial in your "theme.styles.scss" like this:
If you also want to include the “Singularity-extras” in your projects, this is the way I managed to do it:
1. Download manually the “singularity-extras” from GitHub, unzip and put them in your node modules. The path must be like this: 'node_modules/singularity-extras/stylesheets/'.
2. Download manually the “modularscale-sass” from GitHub, unzip and put them in your node modules. The path must be like this: 'node_modules/modularscale-sass/stylesheets'/.
3. Add both of these in your gulp file in the sass_config variable like this:
4. Include them at the top of your "theme.styles.scss" like this:
5. Enjoy the Singularity awesomeness!
Pay attention, too, to any permission problems. This is a common problem. I usually change the owner of my application like this,
sudo chown -R www-data:www-data /var/www/html/
.Changing file permissions with
sudo chmod -R 777 *
is a very bad practice (forbidden in production environment) and it should be avoided....
You can see a test project I set up including singularity-extras and multiple $output styles within the same project here: https://github.com/Vaggos/Singularitygs_test
or here:
http://sassmeister.com/gist/8ee776e764a6cf6cc5c3
Comment #21
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedComment #22
alexberendei CreditAttribution: alexberendei commentedThank you Vagelis! #20 worked for me, except the last part in theme.styles.scss where I've put:
Comment #23
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedYou are welcome alexberendei! Happy gulp-ing!
(I changed the code above, according to your comment. Thanx).
Comment #24
steveOR CreditAttribution: steveOR commentedThanks Vagelis your #20 helped me out! Omega recently switched to gulp and really had no idea how to get the drush wizard generated subtheme to compile a new layout similar to the omega parent theme layouts. Using susy instead of singularity so made the necessary adjustments. Didn't know about the compass-mixins node module cool. The sass_config mechanism is handy also.
Comment #25
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedYou are welcome steveOR. I am happy I could help.
Comment #26
djschoone CreditAttribution: djschoone at d-Media commentedThank you Vagelis. We managed to get it working with you comments.
The parts for clear-cache and browsersync should be optional in my opinion. Main reason for LibSASS is having more speed in compilation. Putting in a clear-cache on every sass change, will not speed development up.
Comment #27
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedHello djschoone. I am glad I could help.
As for the 'clear-cache' code, you are right. In fact, it didn't clear the caches when I tested it. I don't know why. So, I removed it from the code above.
As for the browserSync, I think it is extremely useful in the work flow. It is optional of course.
Another very useful plug-in is uncss. It is a little tricky to set it up with a CMS though.
Comment #28
bramvandenbulcke CreditAttribution: bramvandenbulcke commentedThanks, Vagelis. I was really struggling to get this to work but your little tutorial saved my day.
Comment #29
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedYou are welcome bramvandenbulcke.
Comment #30
steveoriolThank you Vagelis !, your post is very helpful :-)
Comment #31
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedYou are welcome steveoriol!
This is the last time I will respond to somebody thanking me because I don't want to "pollute" the post. It does not mean that I ignore anyone. Thank you all guys.
Comment #32
BenMirkhah CreditAttribution: BenMirkhah commentedLate to the party but hey I too wrote a new gulp file to include 3 features I love:
1) Folder Globbing
2) SVG->PNG
3) Live Reload
Here's a link to my gulpfile.js as the code may get updated in the future.
Comment #33
djschoone CreditAttribution: djschoone at d-Media commentedGreat addition benmirkhah. I'm missing livereload now and haven't had the time to add it yet.
Comment #34
BenMirkhah CreditAttribution: BenMirkhah commentedThanks man, can't live without LiveReload myself, F5 key is no longer worn out!
Comment #35
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedNice addition BenMirkhah.
About the livereload, I think it is awesome indeed, but browserSync is livereload on steroids. I suggest you check it out.
Comment #36
fubhy CreditAttribution: fubhy commentedThanks @Vagelis and @BenMikhah. I have been using webpack and browsersync for hot reloading without gulp even before adding gulp to the starterkit. However, I don't think that it would be a good fit for the majority due to the added complexity... Hence why I added gulp to the theme anyhow.
I would love to add browserSync through good old gulp too though (and other goodies as per your recent comments here). Would you guys be interested in collaborating on a new gulpfile.js that combines the best pieces of both of your current versions so I can add that to 4.x-dev?
Comment #37
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedHello fubhy. I would like to help anyway I can.
Comment #38
fubhy CreditAttribution: fubhy commentedCool. Can you provide a patch with a better gulpfile including browsersync?
Comment #39
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedSince I haven't made a patch before, is that the proper way to deal with the issue (I am asking because I have provided my gulpfile in the comments), and if yes, is this the guide for patches?
Making a Drupal patch with Git
Comment #40
fubhy CreditAttribution: fubhy commentedYes, that is the correct guide. Patches allow me to better review the changes in the project directly and then apply and commit it instead of manually copying over things.
Just changing the gulpfile.js is not enough though since you probably want to also change the current implementation of the livereload settings etc. in the admin settings UI and how they are applied (I think that's in omega/includes/development/development.inc and development.settings.inc). I am not sure how we should proceed there because removing livereload there would also remove it for users of the old (now 'dusty') starterkit. Maybe we should move keep the livereload settings and just add the browsersync stuff next to it so ppl can choose.
Comment #41
fubhy CreditAttribution: fubhy commentedIf you need any help, let me know.
Comment #42
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedI didn't mess around with any livereload settings. I just create an omega subtheme with libsass suport, and edit the default gulpfile (and package.json). Ok. I will look into it asap.
Comment #43
BenMirkhah CreditAttribution: BenMirkhah commentedFubhy, I'd be glad to help man,
Couple of other things that also are needed:
1) a little make utility for "drush owiz" to get the new gulp dependencies
2) I've converted the simple layout from SusyOne syntax to Susy2 I like to share
3) Need a dev/prod environment switcher in my gulpfile as well
I'm going to dedicate some time week and get some patches to you.
I've heard great things about BrowserSynch and will try it out for sure.
Cheers
Comment #44
amreana CreditAttribution: amreana commentedbrowserSync would look really nice btw.. :)
also anyone would know the reason why i need to clear my cache every time i write a scss file? ( i confirm i have no cache enabled for css or js files )
Comment #45
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedA patch for the package.json to support the new gulpfile.js which will be added.
Comment #46
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedI managed to make the gulpfile.js patch too. This is it fubhy.
Comment #47
devkinetic CreditAttribution: devkinetic commentedHey I'm a new user to Omega. All of the documentation for creating sub themes and adding dependencies no longer applies. I'm not totally sure where to start.
Comment #48
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedHello devkinetic.
I am sure omega wizard works. I have used it very recently.
See these threads for more info.
https://www.drupal.org/node/2045303
https://www.drupal.org/node/1936948
PS: Try to set Omega as your default theme, drush cc all, and then run the omega-wizard.
Comment #49
sahaj CreditAttribution: sahaj commentedHi, I'm trying to figure out either:
Thanks for all!
Comment #50
steinmb CreditAttribution: steinmb as a volunteer commented@sahaj this issue is about "Switch current omega sub-theme to the new LibSass". Please open a new support issue instead of hijacking this.
Comment #51
sahaj CreditAttribution: sahaj commented@steinmb maybe I wasn't clear enough, but:
So please, don't be offended and if this thread in only about gulpfile.js then consider to make the title more explicit. And if you have any suggestion for my issue be welcome to explain it in https://www.drupal.org/node/2597858.
Comment #52
Staler75 CreditAttribution: Staler75 commentedI don't know if this is offtopic or not, but i tried to use the new way omega works, but can't get it work properly, i used the files Vagalis posted here and on github, but no luck.
most of the problems i have i running gulp.
it worked for a brief moment, but now it keeps crashing my Xamp control and won't run at all.
also i have problems with the coding, it seems there are some updates of using code like $grid:16 must now put as @include add-grid(16);
is there a place where all these new way of theming is explained? because i got stuk with the level-up tuts and this new way of theming with omega
Comment #53
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedI don't know about Xamp to help you. I work on LAMP (Debian 8)...
As for the
$grid:16
vs the@include add-grid(16)
, it is purely a Singularity thing. The syntax has changed since version 1.2+. See https://github.com/at-import/Singularity/wiki.Comment #54
Staler75 CreditAttribution: Staler75 commentedthnx for the quick reply and the link.
i'm totally new on Singularity, gulp etc. did work with omega 3 but never with 4 so it's hard to debug a error when following a tuturial which is slightly different then how omega 4 works today.
i solved a lot of errors i ran into during the tut by searching on google etc, but i can't find a solution for this problem
hopefully someone can help me with the gulp problem.
Comment #55
steinmb CreditAttribution: steinmb as a volunteer commentedThis patch is combining the two patches from @Vagelis. One of the patches was corrupt but I fixed it. I hope the people in there can start to test this. This patch is untested by me since all I did was to fix and combine. Make it easier to test for everyone.
Comment #56
steinmb CreditAttribution: steinmb as a volunteer commentedComment #57
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedI submit a patch that contains all the previous patches, plus more improvements and additions.
Comment #58
steinmb CreditAttribution: steinmb as a volunteer commentedGreat job @Vagelis. I think the issue summary should be updated with instructions on how to test this patch.
Comment #59
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedComment #60
steinmb CreditAttribution: steinmb as a volunteer commentedComment #61
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedUpdated the issue summary with directions to apply and use the "omega-switch-to-libsass-2537364-57.patch".
Comment #62
steinmb CreditAttribution: steinmb as a volunteer commentedA little note from John W and Zen on Compass. Yes, it's dead and we should all move away. https://www.drupal.org/node/2442861#comment-10611186
Comment #63
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedVery helpful comment @steinmb. I didn't know that. Another serious reason to push forward this issue.
Comment #64
rajmataj CreditAttribution: rajmataj commentedI've tried a number of these examples, mostly Vagelis' #20 and BenMirkhah's #32 but keep getting a:
Error: Cannot find module 'node-sass-globbing'
message. For clarification, if I have 5 SCSS files in one directory, such as:Should I not expect those to be picked up by this line in my [theme].style.scss file:
@import "sass/base/**/*.scss";
?Regardless of this error, the gulp compiler still seems to want individual files listed. Isn't the point of globbing to not have to specify each file in the parent .scss file?
My goal is simply to use Omega 4 with the Default starter kit and only add the capacity for globbing. For now, I don't need any of the livereload, susy, etc. I'm trying to keep the gulpfile.js as simple as possible for now. Any help is appreciated. Thanks.
Comment #65
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedrajmataj, you have to install the node module. Read again my comment #20. I have updated it with more detailed instructions.
Comment #66
rajmataj CreditAttribution: rajmataj commented@Vagelis,
Thanks for your comment. I do indeed have node.js installed. Perhaps I should put my question into a different ticket. What I'm trying to do is basically use globbing with the Default starterkit of the Omega subtheme. Since this ticket is about switching more than setting up from scratch, I'll start a ticket elsewhere. (see here)
Thanks again.
Comment #67
rajmataj CreditAttribution: rajmataj as a volunteer commentedMuch appreciation to all the helpful comments here. I managed to get everything I need working, including globbing with a nested smacss structure, and sourcemaps displaying correctly. The gulp-cssmin module was producing errors, so I took it out since in the end I would be using Drupal to compress the final CSS. Here is the setup I have used on a fresh Omega subtheme which I've and tested successfully on various platforms with Omega 4.x and the 'default' starterkit:
My package.json:
My gulpfile.js:
From within the subtheme, now run:
npm install
, which will download the required node_modules for the Omega subtheme (This requires Python if it is not already installed) This will take a few mins and you should pay attention to any errors which come up. You do not want to version control the node_modules directory, by the way.my_subtheme.styles.scss
Now in your CLI, type
gulp
and wait for the gerbils to run on the wheel happily. You should see your browser open a new window with localhost:3000 but you can either use that or close it and use your own custom url if you have one. Since these are two different urls, you'll be required to log into at least one of them to use admin functionality.To use the browsersync capability, you need to download and enable the Drupal module of the same name. I also disable LiveReload within Omega's settings. Everything seems to working smoothly. Yay!
Also note for Windows users, you need NPM3 because apparently Windows can't deal with the multilevel nesting structure of node_module dependencies. So, unfortunately, you have to update to a beta version of NPM. See here for notes on that and try using version 3.4.x.
Hope this helps others.
Comment #68
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedHello rajmataj. Two comments.
"scripts": { "postinstall": "find node_modules/ -name '*.info' -type f -delete" }
does not work.My testing environment is a Debian 8 server. I don't know about Mac, on which you probably work.
Comment #69
rajmataj CreditAttribution: rajmataj as a volunteer commented@Vagelis,
Thanks for your comments. Here are my observations so far: On a Windows 7 machine (which I unfortunately have to work with at work), the postinstall script in my post seems to work fine to remove the .info files. I only assumed this would be working on my Mac at home but so far, no problems or errors.
As for the Browsersync module, since I prefer to develop my sites on a custom url, such as dev.mysite.com instead of localhost:3000/, in order to have the custom url reload every time I save a scss file, the browsersync module actually must be enabled for that to happen. That is the case on Windows, Linux and Macs that I am using.
Comment #70
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedI also use Browsersync with custom urls without the Drupal module. It is a matter of configuration. You have to declare your url here in your gulpfile:
proxy: "my_custom_url"
.Anyway, whatever works for you (or anybody else).
Comment #71
joelpittetWe added a couple fields to Basic theme to allow configuration, it's not to tricky, have a look at 7.x-4.x or 8.x-1.x branches.
Comment #72
joelhsmith CreditAttribution: joelhsmith as a volunteer commentedHow to I get Gulp to write console errors to the top of the page also?
Comment #73
FranCarstens CreditAttribution: FranCarstens commentedBy the time I've completed upgrading Omega my client's run out of budget.
Comment #74
rajmataj CreditAttribution: rajmataj as a volunteer commented@FranCarstens,
You don't need to upgrade Omega in the first place, so no time is needed on your client's part unless they are specifically asking for this change. If what you have right now works, then there's nothing to do. LibSass, Gulp, etc are not requirements and are not unique to Drupal nor Omega. They are universal for working on all kinds of website projects, from hand-coded ones, to most CMS's. The newest Omega 'default' starterkit is simply taking advantage of this but doesn't require you to change.
Comment #75
pietpomp CreditAttribution: pietpomp commentedThx rajmataj, your 'plumber' solved my issues!
So please see my addition to your package, gulpfile and scss. I found using 'gulp-sass-glob-import' got my partials to work. Now I have gulp successful and resulting css similar to what compass compile use to do.
package.json - "devDependencies" gets this line added:
"gulp-sass-glob-import": "^0.1.0",
gulpfile.js gets this lines added:
then further down:
Now with
@import "variables/*";
in my scss/mystyles.scss I get:scss/variables/filename.scss create css/variables/filename.css but
scss/variables/_underscore.scss (and other partials) goes to css/mystyles.css
I had to do this as your #67 gave me partial and import errors
Now all good.
------ EDIT ----------
my mistake: This gives me 'double imports'.
a scss file with no underscore will actually create a the css folder tree and file, but will also end up in the mystyle.css file
----------- ARRRRGGG!
Comment #76
omahmI got a work around based on the solution from @rajmataj and running on Ubuntu (docker/drude container)
It'll glob nested sass files on watch, just won't recognise new directories or files and works with singularitygs, breakpoint and compass.
package.json
Important
Note the lack of the compass-mixins package, You need to clone this repo into your node_modules directory:
https://github.com/tjenkinson/compass-mixins
This fixes the '@function compact issue' in compass lists.scss
gulpfile.js
themename.styles.scss
Needs a bit more work but it at least fixes some of the issues I was having, hope it helps.
Comment #77
karolus CreditAttribution: karolus as a volunteer commentedcryx2's solution, #6, worked great for me.
I'll second that susy and breakpoint-sass should be included in the starter kit, as well.
Comment #78
adam1 CreditAttribution: adam1 commentedWithout importing compass compiling works, but with the line
@import "compass";
in my styles.scss i get this error:Error: File to import not found or unreadable: compass
What's wrong here? Is there a more step-by-step guide out there for not-so-tech-savvy folks?
Comment #79
joelhsmith CreditAttribution: joelhsmith as a volunteer commented@adam1 First question, its hard to tell without knowing about your whole setup. I think it is not working because it is not included, as it says. There are a few ways to get Compass included. I will tell you how I am doing it. In your Package.json file you will need to add it in your "dependencies"... example:
Then in your gulpfile.js add the location to your config.
Then re-run your install to get that added.
You will also need to add the compass as an include to your blaublau.styles.scss
@import "../node_modules/compass-mixins/lib/_compass.scss";
I also add that sass_config in as a .pipe in one of my gulp.tasks. I have no way of knowing what tasks you have. But you would need to add a reference to it .pipe(sass(sass_config).on('error', sass.logError))
If you are successful you will probably run into another error: "Functions may not be defined within control directives or other mixins". You can read about that here:
http://stackoverflow.com/questions/36775755/functions-may-not-be-defined...
This is just one way to add Compass functionality. There are other ways.
The second question about step-by-step guide, I suggest finding tutorial about how Gulp works outside of Omega, before trying to tackle it inside an Omega subtheme. It will simplify the learning process a little bit. This stuff is pretty complicated.
Comment #80
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commentedadam1, this thread includes quite detailed instructions, and setup examples.
Read the thread carefully and try executing the setup step by step. I am pretty sure you will get around it.
Comment #81
adam1 CreditAttribution: adam1 commented@joelhsmith and @vagelis; thank you, I followed your suggestions and got it finally to work!
Comment #82
adam1 CreditAttribution: adam1 commentedI tried to build a custom layout for my omega subtheme with gulp/libsass according to this tutorial (I just cloned the in omega included "simple" layout and renamed all the files). Gulp is watching the .sass file of my new layout and recognizes when there are changes ("starting 'sass'" and "finishing 'sass'" in the terminal output), but there are no css files written; i also realised, when writing some syntactically wrong sass code on purpose, the compiler doesn't complain at all in contrast to my main .sass file, where the compiler throws out errors. What might be the reason?
Comment #83
vagelis-prokopiou CreditAttribution: vagelis-prokopiou as a volunteer commented@adam1, I suppose that either the destination in your gulpfile.js is not set correctly, or that the globbing in not working for some reason. I suggest that you take a closer look in the setup of your gulpfile.js.
Comment #84
bramvandenbulcke CreditAttribution: bramvandenbulcke commented@adam1, layouts are indeed confusing!
When using the gulpfile.js from post #20, you need to have a subfolder /layouts in the sass folder, with a separate folder for each layout, for example /layouts/layoutname. Then, in the file layoutname.layout.scss you need to @import the other sass folders as follows:
Comment #85
realkevinoshea CreditAttribution: realkevinoshea commentedI did a writeup for those who are interested on how to switch to Libsass/Grunt on the dusty starterkit (keeping all the susy stuff needed for layouts working).
Comment #86
osopolarFinally coming back to my issue while working again with Omega 4 for a redesign. I managed to change from ruby to libsass, the only thing I was missing was browser-syncs auto css injection, instead of a page, reload … as that really speeds up theming. It took me a while to fix that. There are two steps to get that work:
1. Add following hook_css_alter() to the theme:
2. Use browserSync.stream() instead of browserSync.reload():
BTW: There might be two different gulp tasks, one for development (with source maps) and one for production, with less debugging information. Check for example the gulp file of the radix theme http://cgit.drupalcode.org/radix/tree/gulpfile.js?id=41d74e8