I've modified some less files and I don't know how to compile them to produce the theme.css.

I read the documentation... I was expecting this to be done automatically or at least via an artisan command, but couldn't find anything about it.

What am I missing?

Thanks

It was automatically compiled for me when I used:

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

However, the current version of the less compiler (leafo/lessphp) doesn't compile Bootstrap 3.1

But itsn't bootstrap 3.1 included in the default theme.less? Was it compiled by an external less compiler then?

Its very likely it was compiled by an external preprocessor. I would use that until things get fixed with leafo/lessphp and bootstrap

leafo seems discontinued (see this: https://github.com/leafo/lessphp/issues/520)

People seem to be using this one now which has no problem compiling bootstrap 3.1: https://github.com/oyejorge/less.php#transitioning-from-leafolessphp

Can October make the switch to it too?

@emzero439 I was just about to post the exact same thing, you beat me to it :) I use the above in my personal projects. I've also logged an issue on git #178 regarding the compiling of .less files, but they should move over to the gpeasy version.

Last updated 9 years ago

I've manually made the switch as described here (https://github.com/oyejorge/less.php#transitioning-from-leafolessphp) and now my theme.less is automatically compiled on each request. Problem is.... it takes AGES.

I come from ASP.NET where the MVC framework is able to bundle and minify on the fly in a breeze. How's the usual less to css workflow in PHP/Laravel/October?

It's usually pretty fast if the caching is enabled, then it only has to parse the .less once if a file has been modified. I've raised the issue over on Git #178 & #179.

Last updated 9 years ago

You can actually make the switch to oyejorge/less.php using composer, rather than manually dropping in the library (which means it will get blown away whenever you composer update).

In composer.json, add

"repositories": [
    {
            "type": "package",
            "package": {
                    "name": "leafo/lessphp",
                    "version": "dev-master",
                    "dist": {
                            "url": "https://github.com/oyejorge/less.php/archive/master.zip",
                            "type": "zip"
                    },
                    "source": {
                            "type": "git",
                            "url": "https://github.com/oyejorge/less.php",
                            "reference": "master"
                    }
            }
    }
],

Also, add the lessc.inc.php file to the autoloader:

"autoload": {
    "classmap": [
        "tests/TestCase.php"
    ],
    "files": [
            "vendor/leafo/lessphp/lessc.inc.php"
    ]
},

Notice the library is still installed under "leafo/lessphp". This is because we overrode that package name in the repositories section. So when composer sees that october wants to install "leafo/lessphp", it will instead use our custom repo path.

Now if you run composer update (or I think composer update leafo/lessphp will work if you don't want a full upgrade), it should uninstall the old leafo/lessphp and install oyejorge/less.php named as leafo/lessphp.

Also: a gotcha that happened for me; forgot to switch the default layout page to point at "theme.less" rather than theme.css. Took me far too long to figure it out....

Personally I use a Grunt to do all CSS stuff these days. This is what I use grunt-contrib-less, because it gives me all the sourcemap stuff as well. And then I set up a filewatcher in PHPStorm to look for changes to LESS files to trigger the Less task.

Just another option instead of using a PHP solution, as you can also set up Grunt tasks to do all the JS concatenation stuff as well, and then it's just a matter of copying the gruntfile from project to project.

What about rendering path to images in less files? For me, It just don`t working... In css files october the line like url('../images/footer.png') replace with url('../theme/THEME_NAME/images/footer.png'), but in less files there is no replacement.

For me it just does not run the less compiler.

I think using grunt is the best option as its easy to use once its setup.

Last updated 9 years ago

Here is a quick tutorial.

STEP 1 : In your theme root directory, execute 'npm init' to create the package.json file. Skip this if you already have this file

STEP 2: In your package.json file, add this:

"devDependencies": { "gulp": "^3.8.10", "gulp-jshint": "^1.9.2", "jshint-stylish": "^1.0.0", "gulp-less": "^2.0.1", "gulp-livereload": "^3.7.0", "gulp-load-plugins": "^0.5.3" }

Execute 'npm-install' via command line in the root directory of your theme file

STEP 3: Create a gulp.js file and copy paste the following link: https://gist.github.com/myxsys/17fa3467aac325365341

STEP 4: Execute 'gulp watch'

STEP 5: Install the LiveReload plugin in your chrome browser. Launch your OctoberCMS frontend and click the 'Enable LiveReload' button on your chrome toolbar

Now whenever you save changes in your less files, they get automatically compiled to theme.css and the chrome browser is automatically refreshed

Last updated 9 years ago

Less functions like 'image-size' don't seem to work when in using build in compiler.

Another quick tutorial : use Brunch !!

you can also use Brunch with the less-brunch plugin to compile your theme.less file into theme.css :

STEP 1 :

Install node.js to get the npm installer (if you don't have it already)

STEP 2 :

Create a package.json file in your directory with the command : npm init

STEP 3 :

Install brunch in your october directory with the command : npm install --save-dev brunch javascript-brunch

STEP 4 :

Create a brunch-config.coffee file and paste the following link

STEP 5 :

Execute brunch build or brunch watch or brunch watch --server

Last updated 8 years ago