I have a directory structure that looks like this:
- /sites/default/themes/THEMENAME/
- CSS/
- THEMENAME.less [contains
@import "base/base.less";
] - base/
- base.less [contains
@import "fonts.less";
] - fonts.less [imports something; see below]
- base.less [contains
- fonts/
- FONTNAME/
- FONTNAME.woff
- FONTNAME.ttf
- FONTNAME.css
- FONTNAME/
- THEMENAME.less [contains
- CSS/
In my fonts.less
, if I try to do this:
@import '../fonts/FONTNAME/FONTNAME.css';
…then after compilation, the server tries to pull from /sites/default/files/yaddayadda
instead of my theme. Presumably this is because Less doesn’t think it needs to move a copy of FONTNAME.css
anywhere, because it’s not a Less file that needs compiling.
If my presumption is right, I’m not sure whether the best solution is for the Less module to rewrite the path, or to just copy the CSS file to the right place. If not, then ¯\_(ツ)_/¯ altogether.
EDIT: Based on #5 below, I again tried changing the fonts.less @import to this:
@import url('../fonts/FONTNAME/FONTNAME.css');
That still 404s, but it’s different; now it looks for /sites/default/themes/THEMENAME/fonts/FONTNAME/FONTNAME.css
. I guess it’s resolving the path relative to the last file in the include chain, which is /sites/default/themes/THEMENAME/css/THEMENAME.less
.
Comments
Comment #2
Lanny Heidbreder CreditAttribution: Lanny Heidbreder commentedComment #3
Lanny Heidbreder CreditAttribution: Lanny Heidbreder commented(Just realized that my title was stupid, based on what I figured out before I finished writing the description.)
Comment #4
corey.aufang CreditAttribution: corey.aufang commentedTry wrapping it in url() like so:
@import's for .css files are not processed by Less, but they are rewritten to work from the destination directory of the compiled Less output.
In this case, we follow the same functionality as Drupal core in how the URLs are rewritten.
I think Drupal core's url rewriting for CSS @import's requires it to be wrapped in url(),
not 100% sureas this is the regex that is used for rewriting URLs:Comment #5
corey.aufang CreditAttribution: corey.aufang commentedI don't use the exact same function that Drupal core does as it's integral to the function drupal_build_css_cache(), but I copied the relevant code exactly.
Comment #6
Lanny Heidbreder CreditAttribution: Lanny Heidbreder commentedComment #7
Lanny Heidbreder CreditAttribution: Lanny Heidbreder commentedComment #8
Lanny Heidbreder CreditAttribution: Lanny Heidbreder commentedBlech, okay, I updated the summary with new information. I had tried that before and it alsol 404s, but I didn't notice until now that it's a different 404; now it's resolving the path relative to the first (or is it last?) file in the include chain, the one that's importing all the others.
I know it's obscene that I have four layers of includes, but IT MAKES SENSE TO ME ALL RIGHT?! :)
I think on Monday I'll go deep on this and see if I can help solve one of my own problems for a change.
Comment #9
corey.aufang CreditAttribution: corey.aufang commentedOhk, wait, you're including a "@import ... .css" inside a .less file that is imported in another .less file.
Let me show you how less.js works: http://lesscss.org/usage/#command-line-usage-relative-urls
So pretty much it's working how it's supposed to. Using the above flag would only work for less.js and would require changing the module code.
Depending on engine support, you could try the (inline) import feature: http://lesscss.org/features/#import-options-inline
This will force the engine import the contents of the external file, so it would actually inline the contents rather than preserving the @import statement.
It appears that oyejorge/less.php supports this feature.
This could cause duplication if you are @import'ing this in multiple locations, but you shouldn't be doing that anyways.
Comment #10
corey.aufang CreditAttribution: corey.aufang commented