Issue with image referencing when generating a styleguide using kss-node

Question

I'm using the NodeJS implementation of KSS. I have the following file structure:

sass          (.scss files)
css           (compiled .css files)
images        (images & sprites)
styleguide    (auto-generated styleguide html)
|- public     (auto-generated assets)
|- template   (styleguide template files)

I can successfully generate a styleguide by executing the following command line instruction:

kss-node sass styleguide --css css/styles.css --template styleguide/template

So sass is my source folder to parse, styleguide is the destination folder and the --css and --template options tell the compiler where to find my main css file and template respectively. During the process the contents of the css/styles.css file is copied over to styleguide/public/style.css which is then referenced by the styleguide. This is all great.

However, the css file that is generated and referenced by the styleguide now sits in a different folder structure from the original css file (it is two deep from the root instead of one) and therefore any references to the images folder are now invalid. Is there a way to resolve this without placing my original css files in another folder in the css directory to mimic the styleguide folder structure (which would be a massive hack)?

Also, any other references to images in the normal html markup (derived from the scss comments) will have to be adapted to reference the adjusted folder structure, and therefore is not indicative of a real life implementation of my code. Is there a way to resolve this too?

Thanks

Answer 1

I know it's not a solution per se, but what I ended up doing was a Grunt task to copy my images (even the generated by Compass) to the public folder of the generated styleguide after the KSS parsing (also done with Grunt).