axllent / silverstripe-less
Wrapper for less.php to integrate LESS into Silverstripe
Installs: 2 081
Dependents: 0
Suggesters: 0
Security: 0
Stars: 6
Watchers: 5
Forks: 4
Open Issues: 0
Type:silverstripe-vendormodule
Requires
- axllent/silverstripe-minifier: ^2.0
- silverstripe/framework: ^5.0
- wikimedia/less.php: ^4.1
README
A wrapper for less.php to integrate LESS into Silverstripe.
Features
- Integrates a fork of less.php seamlessly into Silverstripe
- Includes flushing option (
?flush
) to regenerate CSS stylesheets (ie. force undetected less changes with @import) - Writes processed *.css files into
assets/_css
and automatically modifiesRequirements
paths - Allows custom global variables to be passed through to less compiling (yaml configuration)
- Automatic compression of CSS files when in
live
mode (may require an initial?flush
) - Adds any processed editor.less files to TinyMCE (must be included in your front-end template)
Requirements
- Silverstripe ^5
Installation
composer require axllent/silverstripe-less
Usage
You need refer to your less files by their full LESS filenames (eg:stylesheet.less
).
Note: The less.php
compiler transforms relative paths like url('../images/logo.png')
into url('/themes/site/images/logo.png')
based on the path provided as you included the files, meaning these won't work in Silverstripe due to the exposed directory structure via (_resources/...
). The two simplest solutions are:
- Use a variable in your less files to provide the path to your files (ie: do not use relative paths), or:
- Include your files using "_resources" in the path to your less file, eg:
Requirements:css('_resources/themes/site/css/stylesheet.less');
Example
In your page controller:
<?php use SilverStripe\CMS\Controllers\ContentController; use SilverStripe\View\Requirements; class PageController extends ContentController { public function init() { parent::init(); Requirements:css('themes/site/css/stylesheet.less'); } }
Or via template
<% require themedCSS("layout.less") %>
The generated HTML will point automatically to the processed CSS file in assets/_css
rather than the original less file location, for example
<link rel="stylesheet" type="text/css" href="/assets/_css/themes-site-css-stylesheet.css?m=123456789" />
Further documentation
- Usage.md for usage examples.
- Configuration.md for configuration options.
- View Changelog