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
Related
The description of Configuration Properties of Compass is very vague and ambiguous (http://compass-style.org/help/documentation/configuration-reference/). Absolutely not clear and no any additional explanation or examples. Here they are:
What is the difference between these?
css_dir - ...where the css stylesheets are kept
css_path - ...where css stylesheets are kept
http_stylesheets_path - ...http path to stylesheets on the web server
And these?
sass_dir - ...where the sass stylesheets are kept
sass_path - ...where sass stylesheets are kept
This is extremely not understandable. What do they mean? They are all the same:
images_dir - ...where the images are kept
images_path - ...where images are kept
generated_images_dir - ...where generated images are kept
generated_images_path - ...where generated images are kept
http_generated_images_path - ...generated images on the web server
Same thing here:
fonts_dir - ...where the font files are kept
fonts_path - ...where font files are kept
http_fonts_path - ...http path to font files on the web server
http_fonts_dir - ...http path to font files on the web server
How to understand what is the difference from one another?
It helps to read the entire description of each setting and the settings they reference.
Path is expected to be the full/absolute path to that item, while dir is expected to be relative to something else.
project_path
Not needed in :stand_alone mode where it can be inferred by context.
Sets the path to the root of the project.
This is the absolute path to your project on the filesystem.
http_path
The path to the project when running within the web server. Defaults to "/"
This is the absolute path to your project as seen from the web.
css_dir
The directory where the css stylesheets are kept. It is relative to the project_path. Defaults to "stylesheets".
css_path
The full path to where css stylesheets are kept. Defaults to <project_path>/<css_dir>.
http_stylesheets_path
The full http path to stylesheets on the web server. Defaults to http_path + "/" + css_dir.
I've tried many responses already, but for some reason I can't get this to work. The error is:
No files were found in the load path matching "sprites/*.png"
My config.rb code:
relative_assets = true
cache=false
Encoding.default_external = "utf-8"
#########
# 1. Set this to the root of your project when deployed:
http_path = "/"
http_generated_images_path = "../images";
# 2. probably don't need to touch these
css_dir = "../css"
sass_dir = "./"
images_dir = "../images"
images_path = "../images"
javascripts_dir = "../js"
environment = :development
line_comments = true
My folder structure:
css
images
- sprites
scss (config.rb located in scss folder)
- partials
- - _mixins.scss (the file where the error is occuring)
And in mixins:
#import "sprites/*.png";
Any ideas what's wrong with the paths?
Thanks for any help.
First question is: do you actually have any files in your sprites folder? If yes, try adding this setting:
generated_images_path = "../images"
http_generated_images_path will be used to define what is the final path for the generated image, in the final (compiled) css, so maybe the setting above (without http_) is the one you need. My project structure is different but it works fine for me, I have more settings pointing to the same path though, this is what I have:
images_dir = "/assets/img"
generated_images_path = "assets/img"
http_images_dir = "assets/img"
http_images_path = "assets/img"
If just the first one doesn't solve the problem for you, try maybe adding all these?
Worst case change your project structure so you don't have to go up one level to get the folder (not saying that this is the problem as it shouldn't be but well, testing is the best way to find out)
I tried various options here. In the end I updated to Ruby 2.1.5 and turned off the Compass "save on build" plugin for Sublime, which seems to have fixed it. Not a perfect solution, but it works for now!
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'm trying to create a basic Compass extension, following the docs here:
http://compass-style.org/help/tutorials/extensions/
The problem I'm seeing is that I can't import files from my extension as expected, because the stylesheets directory, which the docs say will be automatically added onto the load path, isn't being added to the load path.
It gives me a command line error saying it can't find the file I tried to import, then lists out the load paths, verifying that my path is not on there.
One of the load paths is indeed /Users/myname/Sites/sitename/myextension_name, but I would expect there to also be /Users/myname/Sites/sitename/myextension_name/stylesheets
Anyone know why this wouldn't be happening as indicated in the docs?
UPDATE
Here's my config.rb as requested:
add_import_path '../../myextension'
# Require any additional compass plugins here.
require "susy"
require "sass-media_query_combiner"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "../../js"
# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded #or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
Ad hoc extensions need to be placed within the extensions_dir directory (which is set to extensions by default).
/path/to/config.rb
/path/to/sass/
/path/to/stylesheets/
/path/to/extensions/ <- extensions go here
Your myextension_name extension should live in /path/to/extensions/myextension_name/ and then follow the rest of the conventions for creating an extension. You may be able to assign extensions_dir to be the same as your sass_dir or your project's root, but I'm not sure that would be a wise idea.
If your extension is meant to be reused with other projects, it might be better to bundle it as a gem instead and use it the same way you're using Susy.
My font-face mixin call is compiling a preceding slash in my css. I have a sprite image using similar pathing that's working:
Compass.configuration do |c|
c.images_path='app/static'
c.fonts_path='app/static'
c.generated_images_dir = 'assets'
c.relative_assets = true
end
works ~ images/imageName
$sprites: sprite-map("images/sprite/*.png");
does not work ~ /fonts/q2.ttf
#include font-face("q2overlay", font-files("fonts/q2.ttf","fonts/q2.dev.svg","fonts/q2.eot","fonts/q2.svg","fonts/q2.woff"));
Any info around how I can tweak my config to remove that preceding slash in /fonts would be appreciated.
Have you set correctly the fonts_dir variable on your config.rb file?
From the official compass documentation:
fonts_dir String The directory where the font files are kept. Standalone projects will default to /fonts. Rails projects will default to "public/fonts".
fonts_path String The full path to where font files are kept. Defaults to /.
http_fonts_path String The full http path to font files on the web server.
http_fonts_dir String The relative http path to font files on the web server.
As you can see on the official compass documentation settings for sprites and images are different than those for fonts.
Let me know if it helped and if you're still stuck, please post your config.rb.
Cheers!