importing less file from outside themes directory

Question

importing less file from outside themes directory

Closed this issue 12 years ago · 20 comments

I'm trying to import a .less file from a folder inside the plugin directory. It doesn't compile the LESS when I do this. It works fine from within the theme's directory tree. Is it possible for me to import from elsewhere?

Answer 1 · 2012-10-25T09:41:49.000Z

Hey,

Is it to use LESS within a plugin? There's some code which could use some
work which tries to determine the directory path from the URL of the LESS
file which is unfortunately isn't very straightforward in WP. I think I
will have to make a wrapper function which does the check and parses the
files using their paths as arguments and then returns a URL for use with
wp_enqueue_style().

I'll keep you posted.

Answer 2 · 2012-10-25T11:16:41.000Z

@cheekyboots What is the exact problem you're having? Currently I'm having some issues with a crappy server where I run into restrictions (open_basedir). Is this the case, or is it something else? Also: If you got errors. Do they come from WP LESS, or from the lessc library (the included submodule)?

Answer 3 · 2012-10-25T18:02:54.000Z

Hi,
I keep some LESS in a plugin that contains core functionality I reuse for all my projects. I'm trying to import this into the styles.less in my theme.

I don't get an error exactly, it just doesn't compile it. If I look at styles.css it still contains that import line above all the CSS:
@import url("../../../../plugins/core/vendors/bootstrap/less/variables.less");

So the browser tries to import it as a CSS file so it just shows up as text, not interpreted.

Answer 4 · 2012-10-25T23:09:49.000Z

@cheekyboots Please confirm if you have PHP error reporting turned on (E_ALL/E_STRICT) in your wp-config.php. Because in this case you could have the same problem. Mine compiles on the second page reload, but is missing parts of it in the final file in the cache-less folder. But on the first run, I get this error and I'm not sure if it comes server side (not getting it local) from a wrong setting in the php.ini, or if it comes from using the latest lessc file or if it is a problem inside our WP LESS code.

Answer 5 · 2012-10-26T07:42:50.000Z

I turned on error reporting and fixed some other stuff that popped up...but this remains the same.

Answer 6 · 2012-10-26T08:51:38.000Z

Its really strange that it finds but doesn't parse the file... What happens if you remove the .less from the @import URL? Lessc assumes it needs parsing if there's no file extension.

Answer 7 · 2012-10-27T06:01:32.000Z

I don't know that it is finding it. It just leaves that @import line as it is written. It shows up above all the style declarations in style.css, untouched. Removing the extension doesn't produce a change.

The browser can find it, because the @import statement reads just like it was a normal CSS @import statement. So that has nothing to do with LESS.

Answer 8 · 2012-10-27T10:13:37.000Z

Ok. This then isn't connected to the problem I have here. Could you show how you enqueue your styles, how you load WP LESS and which files show before?

Answer 9 · 2012-10-27T23:39:30.000Z

Um, that's a lot of code to paste in, I do i in the standard way and I'm not sure my exact code matters? It works just fine in all other respects, and it will parse this file if I put it within the theme directory, so there is no problem loading or running WP-LESS or enqueuing styles. It only stops working if I put it in the directory of one of my plugins.

Is nobody able to replicate this, is that the problem?

Answer 10 · 2012-10-28T01:05:13.000Z

How should anybody be able to replicate this without knowing your exact setup?

Von unterwegs...

Am 28.10.2012 um 01:39 schrieb cheekyboots notifications@github.com:

Um, that's a lot of code to paste in, I do i in the standard way and I'm not sure my exact code matters? It works just fine in all other respects, and it will parse this file if I put it within the theme directory, so there is no problem loading or running WP-LESS or enqueuing styles. It only stops working if I put it in the directory of one of my plugins.

Is nobody able to replicate this, is that the problem?

—
Reply to this email directly or view it on GitHub.

Answer 11 · 2012-10-28T01:20:27.000Z

If it's a software bug it would not be dependent on "exact setup". Only if it's a problem in my setup would setup be relevant, and as the program functions otherwise perfectly, I don't think my setup is the problem. Or at least not in regards to the questions you asked about. Perhaps it a function of other parts of my setup, like running locally on a Mac using XAMPP rather than say, on a server running Linux. But you didn't ask about that.

Answer 12 · 2012-10-30T10:04:44.000Z

I've raised an issue on the lessphp issue tracker here leafo/lessphp#337

This one feels like a parser problem to me, hopefully leafo can confirm whether it is wp-less or not.

Answer 13 · 2013-01-15T13:16:43.000Z

@cheekyboots sorry its been so long, I've updated to lessphp 0.3.8 which has a method to help you out. If you do the following it should scan your plugin folder too:

add_filter( 'less_import_dirs', function( $dirs ) {
    $dirs[] = '/path/to/your/plugin';
    return $dirs;
} );

Happy days :)

Answer 14 · 2013-06-11T19:30:54.000Z

How do I get this to work? I am trying to access less files in this structure:
[theme_folder]/includes/bootstrap/less/*.less

What do I need to do to get it to parse those files? Right now I am getting
parse error: failed at @import "styles.less";

Answer 15 · 2013-06-11T23:31:27.000Z

Can you show me the code where you enqueue the less files and the less code
with the imports?

Robert O'Rourke
sanchothefat.com
+44 7816 329424

Answer 16 · 2013-06-12T07:16:02.000Z

I am using the below code to queue the base styles sheet in less:
wp_enqueue_style('less-style', get_stylesheet_directory_uri() . '/styles.less');

It works perfectly. But when I try and import it does not work...
@import "includes/bootstrap/less/bootstrap.less";

parse error: failed at `@import "includes/bootstrap/less/bootstrap.less";

Answer 17 · 2013-06-12T08:29:46.000Z

Ah ok. That definitely used to work, I have the same kind of set up on a
client site. Will look into it.

I assume its the default bootstrap.less?

What happens if you comment out the @ imports in there?

Robert O'Rourke
sanchothefat.com
+44 7816 329424

Answer 18 · 2013-06-12T15:56:11.000Z

It still does not work. I tried this as well:
@import "test.less";

test.less file contents:
body{
font:Arial;
}

Still gives this error:
parse error: failed at @import "test.less";

Answer 19 · 2013-06-12T16:21:30.000Z

I figured it out! My IDE was encoding my text files as UTF-8 with BOM. Once I changed all the less files to use UTF-8 without BOM encoding, suddenly everything started to compile. I think it is working as needed now!

Answer 20 · 2013-06-12T19:08:43.000Z

Aha! So glad you found that, not sure I would have figured that out... I
couldn't reproduce the problem at all. I had a different BOM related issue
just yesterday!

On 12 June 2013 17:21, Gabriel Fuller notifications@github.com wrote:

I figured it out! My IDE was encoding my text files as UTF-8 with BOM.
Once I changed all the less files to use UTF-8 without BOM encoding,
suddenly everything started to compile. I think it is working as needed now!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/22#issuecomment-19337199
.

Robert O'Rourke
sanchothefat.com
+44 7816 329424