When attempting to import multiple less files from a less file using @import does not load any styles after the first @import. For example

@import "grids.less";
@import "mixins.less";

grids.less will import and compile properly however no styles from the mixins.less will?

Any ideas?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

corey.aufang’s picture

My first guess would be to check your syntax in the included files.

Next, I would follow the instructions on the project page and upgrade your copy of the lessphp library to the latest version.

petsagouris’s picture

Category: bug » support

Anyone else experiences this ? I am going to test this in a while.

attiks’s picture

Are you using version 0.3 or the included version of lessphp. I have this working with 0.3 and 0.3.1

erichomanchuk’s picture

I am having the same issues using lessphp 0.3.3.

It appears that when the less files are compiled that the first @import is read and loaded but any other @import is ignored. I noticed that when the less module gets the content of the file to parse, it uses a php function file_get_contents() to get all the contents of the files including the @import files. This works fine with css files but it dosn't seem to work correctly for .less, only importing the first one.

Not sure if this is a php version issue or just a syntax issue, i'm running php 5.2.9 but I cant get the second less file to load.

here is what I have in my layout.less file loaded from the themes .info file.

@import url('grid.less');
@import url('elements.less');

body {
background-color: red;
}

I also tried
@import 'grid.less';
@import 'elements.less';

corey.aufang’s picture

What happens is the module loads the .less file using drupal_load_stylesheet, which should automatically load all @import commands and replace them with their contents, recursively.

You mentioned you are using PHP 5.2.9, and I seem to recall that there were some regex errors with that particular version.

If you can, try with a different version of PHP and see if you're still running into the issue. I'm on PHP 5.3+ and I'm not running into the issue. I know this works on php 5.2.6.

There is another way to test to see if this is an issue with your version of PHP. Create a regular .css file with a couple @import statements and then turn on CSS aggregation. That should invoke Drupal core to load the stylesheet with drupal_load_stylesheet. Check to see if the content of the files that are referenced with @import are now showing in the aggregated file.

erichomanchuk’s picture

I found what was causing the issue and it was my @import url. What I was actually doing was putting less files that were not mine into separate folders like the semantic grid and elements.

@import url('grid/grid.less');
@import url('elements/elements.less');

Apparently doing it this way, only the first less sheet is imported and everything after is ignored, so i would get grid.less but no other less files after it.

So this does work. Just have to put all my less files in the same directory.

@import url('grid.less');
@import url('elements.less');

Thanks for the help.

Michsk’s picture

I was doing the same thing as above. Placing all the files i wanted to import in the same folder as my own .less file is located fixed the bug.

So:
My .less file was for example in
theme/less/my_style.less
The files i wanted to import where in
theme/less/bootstrap/less/file.less

That way i could not import the file.less file. Placing the files.less file in the same folder as my_style.less, fixed it.

corey.aufang’s picture

Digging through the queue I found this

#1350646: @import from another directory not being included

Which referenced this

#1198904: drupal_load_stylesheet() fails to load @import files in different directories

Which explains the issue at hand.

We will need to write our own implementation of drupal_load_stylesheet to fix this.

There is a patch in #1198904-16: drupal_load_stylesheet() fails to load @import files in different directories which should take care of the issue, and keep code duplicating to a minimum.

kpa’s picture

In this, I found that the 'present working directory' of the css compiler is the one which was last called. importing less files relative to that directory still works.

Example:

@import url('grid/grid.less');
@import url('elements/elements.less');

will not work, but

@import url('grid/grid.less');
@import url('../elements/elements.less');

will.

martysteer’s picture

I have just applied the aforementioned core patch to D7.14 (http://drupal.org/node/1198904#comment-5686224) and this seems to have fixed LESS @imports. I can now @import .less files from various theme/css/sub-dirs and compile without problems... so far so good anyway. *crosses fingers*

Hopefully this patch will be included in the next D7 release?

lund.mikkel’s picture

How did you apply the patch to D7.14 if the patch is for D8?!

interestingaftermath’s picture

I would also like to know how to apply this patch.

joecorall’s picture

To anyone running D7 who wants to apply the patch discussed in the thread, found at http://drupal.org/node/1198904 here's how to do it:

First, remove lines 31-51 (including lines 31 and 51). That part of the patch attempts to write to a file non-existent in D7.

Then, from the command line run

cd /path/to/your/drupal/root
cd ..
ln -s /path/to/your/drupal/root core
git apply -v drupal_load_stylesheet-1198904-16.patch
barryvdh’s picture

Also encountered this bug. Any idea when this will be fixed?
When I use

@import "bootstrap/bootstrap.less";
@import "responsive.less";

Not the file responsive.less get's included, but bootstrap/responsive.less. Changing the second import to ../responsive.less works, but this is not correct behavior.
(Works fine outside Drupal, with the same compiler)

Michsk’s picture

@#9: not working for me.

corey.aufang’s picture

I've been thinking further on this and have come up with 2 solutions:

1) We implement our own version of drupal_load_stylesheet() and correct the errors that this basepath roaming, which will make this function as people expect with other LESS code, which would also make it easier to use 3rd party libraries. This would also provide a wedge for functionality required for #1169114: Check last modified file time?.

2) We do nothing and the functionality stays the same as Drupal core, also requiring no work. This would also mean that #1169114: Check last modified file time? would be more difficult.

attiks’s picture

I ran into the problem last week that my imported less files weren't processed (aggregation turned on), I tried the patches as well, but no luck.

I think the safest is to fix this in this module, so we're sure the .less are being processed.

corey.aufang’s picture

One more thing, if we're to change how paths are interpreted, we are going to be changing expected functionality of this module.

This might have to wait for a major revision change, have a large warning message, or have the correct path methodology toggle-able some way.

I just don't want to push out a point-version update that now breaks everyone's sites if they were including files in the currently working method.

I'm welcome to suggestions and patches.

ging74ru’s picture

I use this patch for 7.x-2.6 version: multiply and recursive import works fine.

corey.aufang’s picture

Does this handle the change of image paths?

The original solution uses the same functions that are used when aggregation of css files because they are written to a different directory than the source.

corey.aufang’s picture

Ok, so I did some work with the latest version of lessphp and it fixes a few issues, one being this issue with @import's not being processed correctly.

There will be a new dev version up soon that should address this issue.

corey.aufang’s picture

Status: Active » Needs review

Please check out the latest beta.

If you are still finding problems, please retag this issue with the new version as all future development for D7 will be on the 7.x-3.x branch.

interestingaftermath’s picture

Version: 7.x-2.4 » 7.x-3.0-beta1

This issue is not resolved with 7.x-3.0-beta1. I still needed to apply the core patch from #13 to get it to work.

EDIT: I'm 99% sure I have upgraded to the latest version. It doesn't look like you're displaying the version number anywhere in the latest version (7.x-3.0-beta1).

interestingaftermath’s picture

Status: Needs review » Active
corey.aufang’s picture

Currently the version will not be displayed if it is insufficient.

Download the latest version from here http://leafo.net/lessphp/ and let me know if that fixes the error.

When you have a version that is v0.3.7 or greater, it will be listed on the status report page.

I am making changes to the status report entries to make this more apparent.

jhood’s picture

I've upgraded to 7.x-3.0-beta1 and downloaded v0.3.8 of lessphp and everything seems to be working correctly for me now.

I'm working with twitter bootstrap and now import multiple less files and everything appears to process correctly.

@import "less/bootstrap.less";
@import "less/responsive.less";
interestingaftermath’s picture

I've upgraded to the latest version of D7, this module (7.x-3.0-beta1) and v0.3.8 of lessphp but importing still is not working for me without applying the core patch from #13.

corey.aufang’s picture

Can you show @import the code you're using and a screenshot or representation of the file/folder structure you have?

andregriffin’s picture

Version: 7.x-3.0-beta1 » 7.x-3.x-dev

Still having this problem with 3.x-dev and lessphp v0.3.9.

Think it is choking on this file:

// Responsive.less
// For phone and tablet devices
// -------------------------------------------------------------


// REPEAT VARIABLES & MIXINS
// -------------------------
// Required since we compile the responsive stuff separately

@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../bootstrap/less/mixins.less";


// RESPONSIVE CLASSES
// ------------------

@import "../bootstrap/less/responsive-utilities.less";


// MEDIA QUERIES
// ------------------

// Large desktops
@import "../bootstrap/less/responsive-1200px-min.less";

// Tablets to regular desktops
@import "../bootstrap/less/responsive-768px-979px.less";

// Phones to portrait tablets and narrow desktops
@import "../bootstrap/less/responsive-767px-max.less";


// RESPONSIVE NAVBAR
// ------------------

// From 979px and below, show a button to toggle navbar contents
@import "../bootstrap/less/responsive-navbar.less";

Possibly something to do with the fact that it tries to re-import variables.less and mixins.less for compiling.

corey.aufang’s picture

I tried to duplicate the issue you were having, using lessphp v0.3.9 and twitter bootstrap v2.3.1:

First I commented out the @import "variables.less"; since I do not have the contents of that file. So if there is an error in that file, that could be the source of your problem.

After that, I copied the latest version of twitter boot strap from the GitHub project download page (https://github.com/twitter/bootstrap/tags), if you download from here (http://twitter.github.io/bootstrap/) zip will not contain the less directory, which would also cause a problem.

After I had downloaded, your provided code sample was not compiling, until I fixed the file access permissions for the bootstrap folder.

With the above completed, everything compiled correctly with 0 errors.

andregriffin’s picture

The differences in the example I provided is part of the recent Bootstrap dev, of which I am a maintainer. We have an included subtheme that use an altered version of the bootstrap.less file to use relative paths to the rest of the Bootstrap library less files. We do this to allow for the ease of editing variables, while keeping the Bootstrap library itself untouched and modular.

Anyway, everything compiles as expected using a local compiler (Crunch), but I get some unexpected/incorrect calculations in the responsive-grid of bootstrap when using the module, seemingly from the failure to re-import of the files I mentioned above.

andregriffin’s picture

FileSize
248.48 KB
173.89 KB

Actually, I'm not so sure it's because of the re-import of mixins and variables. However, here are the two compiled versions I have, one locally compiled via Crunch, and one compiled by the module/lessphp. You'll notice the one compiled via lessphp duplicates the mixins and has some arithmetic differences (which is causing my grid to break. The one compiled via Crunch works as expected.

corey.aufang’s picture

The issue you're having appears to be with lessphp and not this module. I suggest opening a ticket (https://github.com/leafo/lessphp/issues).

I agree that the duplicated declarations would be annoying, but they don't appear to actually cause problems from what I can see.

As to the calculations, I'm guessing the differences are due the precision of each platform.

Since there are inherent precision differences between javascript and php, you might be able to mitigate this using floor() and ceil().

No one should need a % value to 14 decimal places.

corey.aufang’s picture

Title: Importing less files using multiple @import does not compile properly » Multiple @import does not use expected pathing

Also, this issue originally has to do with @import and their pathing. I'm changing the title to help clarify the purpose of this issue.

If you feel that the problem you are experiencing is still related to this module and not lessphp, please open a new issue and we can continue diagnosing it there.

corey.aufang’s picture

Status: Active » Fixed

This should be resolved in 7.x-3.0.

If you are still having problems unrelated to pathing, please open a new issue.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.