curvedmark
commented
11 years ago Did you use link or style element to insert roole code? Since style element don't have the href attribute, it's relative to the html file by default.
Closed tomturton closed 11 years ago
curvedmark
commented
11 years ago Did you use link or style element to insert roole code? Since style element don't have the href attribute, it's relative to the html file by default.
tomturton
commented
11 years ago Here's an example:
This works (pre-compiled Roole):
/index.html
...
<link rel="stylesheet" href="css/styles.css" />
.../css/styles.css
body { background: url('images/bg.png') repeat; }
/css/images/bg.png
* image *
This doesn't work (compiled at runtime with JS script):
/index.html
...
<link rel="stylesheet/roole" href="css/styles.roo" />
<script src="js/roole.min.js"></script>
.../css/styles.roo
body { background: url('images/bg.png') repeat; }
/css/images/bg.png
* image *
The rest of the styles work fine, it's just the URL paths that seem to be wrong.
curvedmark
commented
11 years ago Oh, I see what you mean.
The compiled css is directly inserted into style elements in the html file, thus the image path is relative to the html file.
Looks like I should use link element with data url instead.
curvedmark
commented
11 years ago Fixed in 0.5.0
When compiling Roole with Node, CSS URLs (eg. background-image:url('x.png');) compile correctly.
However if using the Roole JS file to generate CSS at runtime, all URLs are assumed to be relative to the HTML document, not the location of the Roole source file.
Eg. If my .html file is in the root folder and my .roo file is in a css folder, any URLs defined in my .roo file will be relative to the root folder, not the css folder.
Roole v0.4.1