I'm trying to add some custom styling to some of my backend views for a plugin I'm working on. While looking through the core modules, I see the use of the CombineAssets class. In the register method of my Plugin.php I'm trying:

CombineAssets::registerCallback(function($combiner) {
    $combiner->registerBundle('~/plugins/path/to/my/less/file.less');
});

What is this supposed to do? From what I can tell, it should create a css file at ~/plugins/path/to/my/css/file.css. I'm not sure when/if this compilation is getting triggered though and I don't see any css file getting created.

Ideally, in a controller, I would use $this->addCss('/plugins/path/to/my/css/file.css') to add the compiled file. What am I doing wrong?

Last updated 9 years ago

This is a built in asset compiler found in October, you can compile all assets using:

php artisan october:util compile assets

Although it might be faster to run

php artisan october:util compile less

That was it. Thanks. Cool feature. Is that documented?

php artisan october:util compile less

This successfully compiles the backend LESS files.

However how should we compile a theme's .LESS files?

I know I could use grunt/gulp/.../elixir, but I'd like to know if October already offers some built in approach.

October has a built in compiler. In your layout (or where ever you want):

<link href="{{ [
        'assets/less/theme.less'
    ]|theme }}" rel="stylesheet">

Only problem that I have with this approach that the compiler only checks the first file theme.less and does not see changes in any import files. This can be solved in a number of ways, like disabling/emptying cache or adding semicolons to you base file

Hi Cpt.Meatball,

Thanks for replying! I tried emptying cache by running

php artisan cache:clear

After that I changed a page specific style file in assets/less/pages/my-page.less added a reference to this file in assets/less/pages/all.less which is then referenced by assets/less/theme/all.less.

The changes in files other than theme.less aren't been updated though.

Am I doing something wrong?

The problem with the current implemented compiler is that it doesn't look for changes any further then the theme.less file.

If you change the theme.less by adding a semicolon after the import,, it will see the change and compile the less again. It's a bit of a non-solution but it works non the less.

Alternatively you can use a local GUI compiler like Koala.

Got it! I ended up setting up Laravel Elixir and using gulp watch to monitor my changes. Everything is fine now!

Thanks dude!

@jfo any chance you could put the steps you took to install Elixir and get it working? :-)

@netm

Here is how I got Elixir to work on my install of October.

1) Copied the package.json and gulpfile.js files from a regular laravel install. 2) Used elixir.config.* to get elixir to work with my theme.

For instance:

elixir.config.assetsPath = './themes/THEMENAME/assets'; elixir.config.publicPath = './themes/THEMENAME/assets';

Then I ran gulp on the main directory of the site (i.e., NOT on the theme directory).

@moshem17556

Your the man! :)

@moshem17556

Can't seem to do this as they've changed it to laravel-mix?

Any advice anyone?

This video explains everything https://www.youtube.com/watch?v=FMKMZqALISI