I was building my site with css and everything was working fine, both locally and remotely. Then I wanted to switch to sass. I installed jekyll-compass and now my sass files are being output as css files in my _site/css folder. Everything works well locally, but when I push them to Github, my styles are not being applied and I get a 404 on that css file. What am I doing wrong?
Instead of setting the output of your rendered SASS files to /_site/css, set the output to just /css (the site root level).
What is happening is that locally SASS is running just fine and outputting into your /_site/ directory as you'd expect. But in production on GitHub pages (where the jekyll-compass gem isn't supported) your CSS isn't being output into /_site at all because the plugin isn't being executed there.
It doesn't matter that it works locally from there because GitHub Pages runs the jekyll build command again once you push and generates /_site/ afresh. So anything it doesn't support (i.e. jekyll-compass) doesn't make it into the production version of your /_site folder.
The workaround I've suggested works because instead of outputting the final CSS into a directory that gets overwritten when you push to GitHub pages, it will instead write it to a directory that is preserved even with a fresh build of the /_site/ directory.
Also of note, Jekyll 2.0 will support SASS, and you can even use the 2.0 alpha gem locally if you want (although GH Pages won't be updated to 2.0 until it's officially released).
Very few plugins are supported by GitHub pages, it used to be none but now there are three. See this page for more information.
You will need to compile the SASS and commit the generated CSS files.
Related
Sass needs Ruby to work. I can install Ruby in my development environment. Nonetheless, I cannot do it in some production environments (hostings).
The reason I think it might work is because the .css files are created every time I run the sass command in my local environment, so once I deploy (push) my website to my server, it has all the .css files already transcribed.
Am I wrong? Do I still need to run the sass command in my server?
You are right. Once the SCSS files are compiled into CSS, you dont need ruby anymore and can use the CSS files as is.
Attempting on a Mac with the latest version of Yosemite
I'm using the latest version of sass to refactor my site. I'm setting up watch command via the command line. my directory setup has a scss folder with the main css stylesheet cloned as .scss. and no css folder.
When I attempt the sass --watch scss:css command while in the main project directory folder, I've been told that, if there isn't one present, a css folder should be generated and a cloned .css file should be created along with a map file. Command line tells me >>> Sass is watching for changes. Press Ctrl-C to stop. however, changes are not being recorded.
I've tried updating my gems and uninstalling/ reinstalling sass, but nothing seems to be working.
Just tried this - the css folder doesn't get autogenerated. You need to generate it yourself. From there on, you should be good to go.
So if you are in the main project folder with subfolders called scss and css and you have, for example, a main.scss file in the scss directory, you can run the command exactly as you specified and everything should work as specified.
I'm fairly new to ruby and jekyll and I wanna start using jekyll to meu personal webpage. Among the files in my repo there is a'Gemfile' and 'Gemfile.lock' files.
The Gemfile is used to manage dependencis and Gemfile.lock is generated through
bundle install
Is any of them required to be in the repo, or does gh-pages overrides any definitions contained in those files?
Other contained folder is '.sass-cache'. From this question I get the impression that it's used for caching issues. Once again, is it required, or gh-pages generates those files itself?
You can version your Gemfile. This can be useful for a reinstall. gemfile.lock and .sass-cache are not necessary to push to Github. They are used locally.
If your Gemfile contains something other than:
source 'https://rubygems.org'
gem 'github-pages'
That certainly means that you use plugins that are not supported by Github (see supported plugins list here). You then need to generate your site locally and push the result to your Github.
I've described a workflow here and you can also have a look at Octopress rake file that can help for such a setup (need small hacks to be used on a basic Jekyll install).
From my interpretation of the docs, github simply uses their own github-pages gem to pull in dependencies and then runs jekyll serve on your repo.
One consequence of that is that your gemfile (and thus any gems not part of github-pages) is ignored. For example, I use jekyll-less to generate my CSS but since this is not part of github-pages, making CSS changes is a multi-step process for me:
Update .less files
Build
Copy compiled CSS out of _site
Commit .css changes
Push
Another consequence is that any run-time or build-time stuff you use is ignored by github, so your .sass-cache directory does not need to be added to the repo.
I upgraded my local Compass and Sass to their latest versions and fixed some errors caused by deprecated code per the latest Sass (3.4.9). I checked those into a branch and the changes include updating a build.gradle file in which it specifies a Sass jar also of the latest version (This was created and uploaded to nexus by another co-worker). For testing, I had another co-worker, who is using an older version of Sass, check out my branch. It built fine. But when he switched back to another branch, it failed, showing the same errors I got after I updated Sass. We verified he is still using Sass 3.2.1. I had him remove a cached file (sass-3.4.9.gem) and directory (sass-3.4.9). The build still failed. I'm not at all familiar with build.gradle files and such. I'm hoping anyone has insight on what happened and how to fix this.
EDIT: Below are two error examples. All the other errors I get refer to not being able to extend a class -
Building > :compileSassWARNING: The compass/css3/box module is DEPRECATED and will be removed in the next release. Please use compass/css3/flexbox instead.
on line 4 of /Library/Ruby/Gems/1.8/gems/compass-core-1.0.1/stylesheets/compass/css3/_box.scss
from line 11 of /Users/sueannaj/dev/workspace/zephyr_css/scss/sass/shared/includes/_imports.scss
from line 14 of /Users/sueannaj/dev/workspace/zephyr_css/scss/sass/twitter-main.scss
error scss/sass/t-store-main.scss (Line 6 of scss/sass/touch/modules/sub/_default-buttons.scss: ".button-group" failed to #extend ".tabbed-layout".
The selector ".tabbed-layout" was not found.
Use "#extend .tabbed-layout !optional" if the extend should be able to fail.
For reference, I'm on Mac 10.8.5 and ruby 1.8.7. Someone here figured a fix, and I will answer my own question.
There were two cached files and one directory that needed removing -
~/.gradle/caches
.gradle
build
The last two, .gradle and build, live in the project directory. .gradle/caches is in the user's home directory.
I'm using Jekyll to create a new site. I'm using the command jekyll serve --watch to automatically rebuild the site each time a change is made.
This is working great so long as I make a change to an existing file. However, if I add a new folder, Jekyll does not notice it. I have stop Jekyll from watching, then restart it for it to notice the new folder and include it in my _site directory.
Is this expected behaviour or is there likely a problem with my setup?
The same thing happens with my Jekyll. I believe the jekyll serve --watch command looks in the current directories for changes, not newly created ones.