I am using jekyll 3.4.0,
i am using sass for styling my website.
while compiling, it is won't create style.css.map file in _site folder, which very helpful for debugging.
My config.yml file
markdown: kramdown
port: 8080
sass:
sass_dir: css
sourcemap: true
style: compact
I don't think Jekyll (yet) supports SASS source maps.
For my projects I have added a SASS build step to my deploy script, which generates source map:
#!/bin/bash
# destination folder in which the build result will be stored
DEST="./_site/style"
# folder in which original SCSS files will be places
ORIGINALS=$DEST/originals
# folder in which include SCSS file will be places
INCLUDES=$ORIGINALS/_sass
# remove the previous version of the folder
rm $ORIGINALS -r
mkdir $ORIGINALS
# copy original SASS include files to output folder
cp ./_sass/ $ORIGINALS -r
# name of the entry point SCSS file (without the extension)
SASS_FILE=style
# copying the entry point SCSS file to the output folder
# (removing the frontmatter from the file)
tail -n +3 ./style/$SASS_FILE.scss > $ORIGINALS/$SASS_FILE.scss
# building the entry SCSS file
sass --load-path $INCLUDES --sourcemap=auto $ORIGINALS/$SASS_FILE.scss $DEST/$SASS_FILE.css
Important
Don't forget to configure your web server to server SCSS mime types.
Additional notes
The important thing here is that original SCSS files also get deployed to the web server, so that a browser can access them!
Also sourcemap parameter needs to be set to auto so that correct relative paths to original SCSS files get inserted into sourcemap.
Related
I have my own Grunt/Compass/SASS project with a config.rb file that has these settings:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
add_import_path "./bower_components/slick-carousel/slick"
As you might guess, the problem here is the slick-carousel I am trying to compile together with my other sass-files. It works fine without that component. The slick-folder contains these files:
./ajax-loader.gif
./config.rb
./fonts
./fonts/slick.eot
./fonts/slick.svg
./fonts/slick.ttf
./fonts/slick.woff
./slick-theme.css
./slick-theme.scss
./slick.css
./slick.js
./slick.min.js
./slick.scss
When compiling the slick-theme.scss, I get warnings that it can not find the files which are referenced via relative urls.
WARNING: 'slick.woff' was not found (or cannot be read) in /project-root/fonts
Is there a way to tell the Compass/SASS compiler to use the "current" SASS file as base for the relative paths? So it would look in /project-root/bower_components/slick-carousel/slick/fonts instead?
Slick.js has it's own Sass variables for handling his fonts urls. So you have to properly assign the right path to that variable like this:
// Fonts
$slick-font-path: "./bower_components/slick-carousel/slick/fonts/";
You can check all slick's Sass variables here
My scss has the following structure:
Nested directory view:
style
sass
components
_somecomponent.scss
_someothercomponent.scss
style.scss
style.css
Collapsed directory view:
style/style.css
style/sass/style.scss
style/sass/components/_somecomponent.scss
style/sass/components/_someothercomponent.scss
style.scss includes _somecomponent.scss and _someothercomponent.scss, and is supposed to generate style.css. It does all of this correctly, but the output file is not in the correct directory. Currently it outputs to style/sass/style.css.
Webstorm is configured with the following parameters:
Program: /usr/bin/sass
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output path: $FileParentDir$\$FileNameWithoutExtension$.css
The phpstorm tag has been added because it shares the same file watcher with webstorm. I am using Mac OS X, with the latest Webstorm 9.x.
How do I fix the output path?
Please change the Arguments field accordingly:
Program: /usr/bin/sass
Arguments: --no-cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output path: $FileParentDir$/$FileNameWithoutExtension$.css
The 'Output paths to refresh' option doesn't tell the compiler where to put the generated files - you have to set the program arguments accordingly; 'Output paths' is used by IDE to synchronize its file system with external changes - you need to make sure that the pattern specified there matches the actual compiler output so that the IDE knows where to look for generated files.
So you need to modify BOTH 'Arguments' and 'Output path to refresh' options to have the generated files created in non-default location.
I don't know if I can explain the issue without pasting the whole code of all files but I'll try.
EDIT I've added the whole code to Github Account - My Sass structure
I use Windows 8.1 and Compass 0.12.6
In my public_html folder I have config.rb file and stylesheets folder. In stylesheets folder I have directory sass where I keep all sass files. CSS files are generated into stylesheets/preview folder (for development purposes) and into stylesheets folder (for production purposes).
I run compass watching running watch.bat script that I have in public_html folder
Content of watch.bat is:
START compass watch -c config.rb -e development
START compass watch -c config.rb -e production
EXIT
My config.rb file is:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "../"
sass_dir = "stylesheets/sass"
images_dir = "img"
javascripts_dir = "js"
cache = false
relative_assets = true
add_import_path "stylesheets/sass"
if environment == :development
css_dir = "stylesheets/preview"
line_comments = true
output_style = :nested
end
if environment == :production
css_dir = "stylesheets"
line_comments = false
output_style = :compressed
end
In stylsheets/sass I have 4 files print.scss , medium.scss, small.scss and large.scss
Both medium.scss and large.scss begin with:
#import "base/_init";
This file import partial _init from base folder and this one loads another partials and other partials load another partials.
The problem is when I change something in partial Compass doesn't always compile all necessary output files. For example I've just changed something in _settings.scss partial and this one is finally loaded by medium.scss and large.scss (I remind that those 2 files have the same beginning so they both should be compiled). Somehow only medium.scss file is being in fact watched and large.scss file is not compiled as it should be in this case.
I have had such situation just before. I stoped 2 watchers (CTRL + C and Y) and then run again my watch.bat not changing anything in files - just after running I have info:
Change detected at 15:51:33 to: large.scss overwrite stylesheets/preview/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
and
Change detected at 15:51:33 to: large.scss overwrite stylesheets/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
So in fact there was change that should be watched but somehow compass/sass doesn't always catch it.
Sometimes neither of 2 watchers catch changes and I have to stop them and once again run watch.bat so it's not very convenient to work that way.
Sometimes even happen that watchers are stopped (as I presed CTRL +C + y) but I haven't pressed anything and in cmd there's no question about closing visible. They've just stopped
Question: What could be wrong and how to fix it?
I've cloned and checked your project structure, and your problem is simply the unnecessary use of the Import Once plugin. If you comment the first line of your config.rb (where this plugin is activated), your stylesheets will be compiled normally. Each main scss file you have (large.css, medium.css, small.css) is rendered to a separated css file, and you're not repeating your imports for each one of these files.
Below is the sequence of your imports with the Import Once plugin disabled:
I dont't know exactly how to solve your problem.
I think basically it's a bug or problem with two instances of compass running at the same time on the same folder.
But due to your environment, I have a suggestion that can do the trick for you.
Why, instead of having two folders with the assets, one for prod. and dev., you just keep one, for both dev. and prod.
What you can set on compass is to output css in the way you want for dev. and then pass that css through a yui filter (or whatever) for prod. This will minify all assets. If you are using symfony, you can use assetics, for instance.
That's the way we do and works perfect. We don't use assetics for compass... that's another topic :D
If you don't use any framework or extra filters, you can alway manually dump the assets when this ones are ready for production.
This way you avoid using two compass instances at the same time and also to compile manually for every deploy on production.
I really think it have to do with having two instances of compass running.
I have currently my octopress blog up and running on my digital ocean droplet and everything works fine. But it is in the root folder of the droplet and I want to move it to a blog folder. Is that just moving all content to that subfolder, or is there more work to do to get this done to be aware of?
According to the Octopress documentation, if you are deploying in a subdirectory you'll need to update the following files:
_config.yml
config.rb
Rakefile
If you're deploying to a subdirectory on your site, or if you're using
Github's project pages, make sure you set up your urls correctly in
your configs. You can do this almost automatically:
rake set_root_dir[your/path]
# To go back to publishing to the document root
rake set_root_dir[/] Then update your _config.yml and Rakefile as follows:
# _config.yml
url: http://yoursite.com/your/path
# Rakefile (if deploying with rsync)
document_root = "~/yoursite.com/your/path"
To manually configure deployment to a subdirectory, you'll change _config.yml, > config.rb and Rakefile. Here's an example for deploying a site to the /awesome
subdirectory:
# _config.yml
destination: public/awesome
url: http://example.com/awesome
subscribe_rss: /awesome/atom.xml
root: /awesome
# config.rb - for Compass & Sass
http_path = "/awesome"
http_images_path = "/awesome/images"
http_fonts_path = "/awesome/fonts"
css_dir = "public/awesome/stylesheets"
# Rakefile
public_dir = "public/awesome"
# If deploying with rsync, update your Rakefile path
document_root = "~/yoursite.com/awesome"
source: http://octopress.org/docs/deploying/subdir/
I'm using Jekyll Asset Pipeline to build my website and I'd like to only compress the website (which takes about 20 seconds) when I'm publishing it. To do this I have to enable these values programmatically in the config file:
asset_pipeline:
bundle: false
compress: false
I've tried to code a plugin but it isn't working. Could someone help me as to why?
module Jekyll
module Commands
# I overwrite this here so we only do heavy work (like compressing HTML and stuff)
# when we are building the site, not when testing (which uses jekyll serve)
class << Build
alias_method :_process, :process
def process(options)
require 'jekyll-press'
options['asset_pipeline']['bundle'] = true
options['asset_pipeline']['compress'] = true
_process(options)
end
end
end
end
You don't even need a special gem - you can pass multiple configuration files to jekyll build:
First, the regular config file, with all the settings that are always needed, plus the values to disable compressing, since you don't always want it to run each time you're building locally:
_config.yml:
destination: _site
source: src
markdown: rdiscount
# ... and many more settings that are always needed
asset_pipeline:
bundle: false
compress: false
Then, you need a second config file for publishing which overrides only the values that you actually want to be different:
_config-publish.yml:
asset_pipeline:
bundle: true
compress: true
So when you're not publishing, you just run jekyll build like before.
But when you're publishing, you pass both config files in the right order:
jekyll build --config _config.yml,_config-publish.yml
Jekyll will apply them in the order you passed them, so the settings in the second file will overwrite the ones in the first file, and bundle and compress will be set to true in the end.
In case you can't control what parameters will be passed to jekyll build (maybe on GitHub Pages? I never used it, but maybe...) you can do the same thing, just the other way round:
Set bundle and compress to true in the default config file
Whenever you're not publishing, use a second _config-dev.yml file to set bundle and compress to false again
The gueard-jekyll-plus gem allows you to configure multiple configuration files where the later ones override the former ones. I have the same set up where I have a _development.yml file that turns off all the asset compilation settings for development work. Yes you have to set guard up, but it makes it simple to refresh the site. Here's the relevant section:
guard 'jekyll-plus', extensions: %w[slim yml scss js md html xml txt rb], serve: true, rack_config: 'config.ru', config: ['_config.yml', '_development.yml'] do
watch /.*/
ignore /^build/
end
I detail most of the basic setup in of the Gem in the article Integrate Jekyll with Slim, Zurb Foundation, Compass and an Asset Pipeline.
Couldn't you also just do:
> jekyll build --config _development.yml
To build with a different configuration file?