在Compass项目目录结构中使用Sass partials的子文件夹

Question

I've got a compass project up and running with scss files in a src directory which are being compiled into a sttylesheets directory as css. This is all fine and I'm able to use the sass @import command no problem.

However, I'd like to bring a bit of organisation to my sass partials and place them into relevant folders within the src directory. However, when I try to do this the @import command fails.

Is there a way of doing this?

UPDATE: I found in the compass docs that I can add add_import_path to my configuration file, but I can't get this to work either. I've tried a full path to the directory and a path relative to the project but nothing is happening.

Someone please help, it can't be this hard!

Answer 1

I had the same problem. Actually I was migrated from rails + sprockets project to standalone one.

I don't know why, but Compass doesn't work with sprockets-style filenames, like screen.css.scss . I renamed all my files just to screen.scss and all partials worked as expected.

Answer 2

I had a similar problem. It was very stupid of me - but then again, most problems in programming are. My problem was that, although I had everything setup correctly for standalone, according to:

https://github.com/twbs/bootstrap-sass

I was using a subfolder structure like this:

project
-- stylesheets
-- bootstrap
-- sass
---- main.scss
------- subfolder1
----------- partial.scss
------- subfolder2
----------- partial2.scss

And in my main.scss, I did use @import correctly, like:

@import "subfolder1/partial.scss"

The problem was this: Compass only sees partials correctly if the filenames start with underscores!

Once I renamed the files to _partial1.scss and _partial2.scss, everything worked without a problem.

Answer 3

例如，如果你在src / partials目录中放置了部分内容 - 只需在sass / scss文件中使用@import "partials/name"来导入它们。

Answer 4

I found that in a webby static project where I was using compass / sass I had to explcitly set the base sass path to be used in order for it to pick up sass imports (everything worked except for imports).

So I ended up doing something like this in the compass config block: config.sass_dir = File.join('content', 'css')

I imagine this is because I'm using something other than the default sass paths, so when I @import it was looking within it's default path instead of the actual path.

Hope that helps.

Answer 5

So it turned out I was going about things the wrong way. I was trying to be efficient and organise my folder structure before doing anything with compass. I realised that I needed to set compass to watch the project first and then create a folder structure. That way the folder structure gets replicated in my stylesheets or CSS folder instead of just being in the source folder. Now everything is working as it should!