在 CakePHP 项目中配置 Compass

发布于 2024-08-20 11:26:23 字数 1217 浏览 5 评论 0原文

我一直在研究 Compass，我看得越多，就越觉得它应该是 CSS 的编写方式。作为一个测试用例，我想在我的一个 CakePHP 项目中使用它。不幸的是，我在初始配置方面遇到了一些问题。具体来说，就是将资源放在正确的位置并在编译的 CSS 中正确引用。

我正在我的 /app 目录中创建一个 :stand_alone 项目。嗯，这就是我想要做的事情。指南针似乎不喜欢这样。在创建项目时，我告诉它把 css、图像和 js 放在哪里，事实上，这些资源确实放在正确的目录中。不幸的是，因为我没有在 webroot 中创建目录，所以编译时资源引用不正确。

我正在使用以下命令在 CakePHP app/ 目录中创建 Compass 项目：

$ compass -f blueprint --sass-dir sass --css-dir webroot/css/ --images-dir webroot/img/ --javascripts-dir webroot/js/ --output-style compact .

不过，编译后的 CSS 想要引用 Blueprint 的 showgrid.png 图像：

url('/webroot/img/grid.png?1264969358')

我想这个是一个相当可预测的结果，但我不知道如何让编译后的 CSS 引用正确的 /img/grid.png?whatever 路径。这可能吗？我是否被迫直接在我的 webroot 中创建我的 Compass 项目？

谢谢。

更新

我的config.rb文件的内容：

# 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

原文

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 css, 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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不离久伴 2024-08-27 11:26:23

运行 Compass v0.10 并使用以下配置：

# 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

提供预期结果。

Compass v0.10 即将发布，您可以通过以下方式安装它：

(sudo) gem install compass --pre

使用此配置创建项目：

创建项目目录
将配置保存到项目目录中的 config.rb 中。
从项目目录中运行命令：compass install blueprint

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: