Configure Compass within a CakePHP project
I've been looking into Compass and the more I look, the more it feels like the way that CSS should be written. As a test case, I'd like to use it in one of my CakePHP projects. Unfortunately, I'm having some trouble with the initial configuration. Specifically, with getting the resources in the right place and referenced properly in the compiled CSS.
I'm creating a :stand_alone
project in my /app
directory. Well, that's what I want to do. Compass doesn't seem to like that. In creating the project, I've told it where to put the c开发者_运维知识库ss, images and js and those resources do, in fact, make it to the proper directory. Unfortunately, because I'm not creating the directory in the webroot, the resources are being referenced incorrectly when compiled.
I'm creating the Compass project in my CakePHP app/
directory with this command:
$ compass -f blueprint --sass-dir sass --css-dir webroot/css/ --images-dir webroot/img/ --javascripts-dir webroot/js/ --output-style compact .
The compiled CSS, though, wants to reference Blueprint's showgrid.png
image as:
url('/webroot/img/grid.png?1264969358')
I suppose this is a pretty predictable result, but I can't figure out how to get the compiled CSS to reference the correct /img/grid.png?whatever
path. Is that even possible? Am I forced to create my Compass project directly in my webroot?
Thanks.
UPDATE
Content of my config.rb
file:
# Require any additional compass plugins here.
project_type = :stand_alone
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "webroot/css"
sass_dir = "sass"
images_dir = "webroot/img"
http_images_path = "/img"
javascripts_dir = "webroot/js"
output_style = :compact
Running Compass v0.10 and using the following configuration:
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
sass_dir = "sass"
css_dir = "webroot/css"
images_dir = "webroot/images"
javascripts_dir = "webroot/js"
http_stylesheets_dir = "css"
http_javascripts_dir = 'js'
http_images_dir = 'images'
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
provides the expected results.
Compass v0.10 is just about to be release, you can install it with:
(sudo) gem install compass --pre
To create a project using this config:
- Create a project directory
- Save the config into
config.rb
in the project directory. - From within your project directory run the command:
compass install blueprint
Rails and other frameworks have the sass files and configuration in the project root, outside the public webroot. A stand-alone project should work fine this way too.
Are you using image_url()
for when you're referencing an image?
In your compass.config
file you can set the http_images_path
if it's different from your directory path. See the configuration page in the wiki for more details.
精彩评论