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]
      • fonts/
        • FONTNAME/
          • FONTNAME.woff
          • FONTNAME.ttf
          • FONTNAME.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

75th Trombone created an issue. See original summary.

Lanny Heidbreder’s picture

Issue summary: View changes
Lanny Heidbreder’s picture

Title: Some relative paths in @import are resolved relative to compiled directory, not theme directory » Pure CSS @import with relative path fails

(Just realized that my title was stupid, based on what I figured out before I finished writing the description.)

corey.aufang’s picture

Try wrapping it in url() like so:

@import url("../fonts/franchise/franchise.css");

@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% sure as this is the regex that is used for rewriting URLs:

/url\(\s*[\'"]?(?![a-z]+:|\/+)([^\'")]+)[\'"]?\s*\)/i
corey.aufang’s picture

I 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.

Lanny Heidbreder’s picture

Issue summary: View changes
Lanny Heidbreder’s picture

Issue summary: View changes
Lanny Heidbreder’s picture

Blech, 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.

corey.aufang’s picture

Ohk, 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.

corey.aufang’s picture

Category: Bug report » Support request