Request directly a theme file

lifeisfoo

I'm developing a theme for vanilla 2.1, using LESS.
I need to import external dependencies (others less/css files inside theme folder) from my main custom.less file using @import syntax.
This less file is referred directly in the master.tpl (with less.js):
<link rel="stylesheet/less" type="text/css" href="{link path="/"}themes/less/custom.less" />
<script src="{link path="/"}themes/less/design/js/less-1.3.3.min.js" type="text/javascript"></script>

This works correcty, but using @import "design/css/bootstrap.min.css" inside custom.less generate a request to http://example.com/themes/less/design/css/bootstrap.min.css that is what I'm expecting, but a 403 Forbidden is generated.

How can I import directly files from my theme folder?

Kasper

Funnily enough, you're trying to do the exact same thing that I myself was trying to do a year ago when I wrote the first version of Bootstrap for Vanilla :-) Here's my advice:

First off, don't use less.js. LESS is genius but less.js is an absolute nightmare. What you should do instead, is compile your LESS files how it was originally intended: Using Node.js. Getting started with this is however a bit of a pain unless you've got some help, which is exactly why I wrote Ninja (shameless self promotion!). It actually comes with Bootstrap out of the box so it should give you an idea how to use it.

Second off, relying on theme hooks instead of views when including assets in your theme is a great idea. Again, Ninja will show you how to do this easily. The source is full of comments so it should be easy to get started!

Hope that helps at least a bit! If you need more help, just say the word.

// Kasper

422

steer clear of @import

Kasper

@422 said:
steer clear of import

Unless used in Sass or LESS (...and Stylus, Roole etc.) in which case @import means "grab this file and insert it into the compiled stylesheet" - given that you're not importing a CSS file that is

lifeisfoo

First of all thank you @kasperisager for your advice.

*I have tried to use Ninja some weeks ago but a I have encountered problems resolving dependencies (npm, grunt, etc) version. Linux distro contains not up-to-date version and mantains different version of the same tools can be a nightmare, unless a distro specific tool is used (in debian like you have update-alternatives), but the software must be packaged. I can suggest you to add a vagrant file inside Ninja so a "O.S. agnostic" quick start is possible.

*Why you say that "less.js is an absolute nightmare" ?

Kasper

No worries! I'll look into adding Vagrant support in Ninja - it isn't a super big project so I didn't deem it necessary at first.

As for less.js being a nightmare, I say that because it compiles all of your less files client side which is a bad idea if you've got a ton of stuff to compile. Initial load times are usually up to 10 seconds (that's going to scare your visitors away) when compiling Bootstrap client-side. It's much better to handle this as part of a build-process using Grunt or some other task manager - Make would do the trick too.

lifeisfoo

Ah, ok, is a time problem. Now I'm using only a sub-part of bootstrap (grid) and the compile time is null.
Obviously compiling cliend side in production environment is a bad idea.

422

Remember also, if you use minify ( we have our own system ), and use @import , not wthin sass or less ( or other vendors ) your css will most likely messup.

lifeisfoo

I know .

I'm wondering about adding a LESS preprocessor to vanilla ServeCss function. LessPHP class support multi path search folder for the import syntax http://leafo.net/lessphp/ .

With these I can work editing directly .less files and serving automatically .css in the frontend (evert F5 or with a file change detector).
@kasperisager: the road to be a Ninja is long

Kasper

That sounds like a really good idea! I actually did somewhat the same thing in Austere (http://vanillaforums.org/addon/austere-theme) but it was never as integrated as you have in mind. I simply used Assetic as middleware, enabling developers to make use of eg. LessPHP without too much hassle. Would love to see something more integrated though :-)