Less and @import

Hi Thierry, Can I use @import with less/beans? With dev mode on and off?

@import "library"; // library.less
@import "typo.css";

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

Works on this end. In development mode though - not tested compiled. I'd think that with Less supporting reference imports and the general concept being integral to it chances are there's not going to be an issue.

Thanks J.C.

Are you giving the full path to the imported files?

When I try to give a realive path to a sub folder in my child theme (e.g. @import "css/library" it is not getting found because beans appears to be searching in /wp-content/uploads/beans/compiler/uikit/css/.

Failed to load resource: the server responded with a status of 404 (Not Found) : http://mysite.com/wp-content/uploads/beans/compiler/uikit/css/homepage.less

Hey guys,

Thanks for reporting this issue, I have done some testing and the @import for .less files doesn't work as expected. I have added that to the dev list and we will work on it for the next release.

In the mean time (and a much better approach as @import should be avoided), you should add all your Less files in the beans_compiler_add_fragment() function. So if I take Beans official child theme example_enqueue_uikit_assets() in functions.php would look as such:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

  $uri = get_stylesheet_directory_uri();

  beans_compiler_add_fragment( 'uikit', array(
    "{$uri}/style.less",
    "{$uri}/another-file-1.less",
   "{$uri}/another-file-2.less",
   "{$uri}/another-file-3.less",
   // ...
  ), 'less' );

}

You may indeed organise it in directories as you need.

Thanks,

@steviec apologies for the delay in response, got sidetracked. Within less using @import works well enough, but as Thierry pointed out, not consistently. Outside of that, it's the kind of sequential loading which Search doesn't like. A good starting point can be found here. His site is very handy in many other ways as well, incidentally.

@thierry might be something for the docs?

Well theoretically using @import with LESS files should just added to the compiler so it doesn't have the same effect as it would with CSS files.

I would still recommend to enqueue it via PHP as it gives more control if conditions needs to be added and it is cleaner to keep it all in one place. That said I have made a note to fix the @import as Beans doesn't like inconsistencies at all 🙂

Thanks,

Thanks guys.

I'll try the beans_uikit_enqueue_scripts Thierry.

What I'm hoping to achieve is having LESS global variables (colours etc.) available to all other files. Will this allow that?

Absolutely, you will be able to access all UIkit variables and your custom one 🙂