A wrapper for scssphp to integrate SCSS compiling directly into Silverstripe.
SCSS files are only compiled when needed, or when a ?flush
is done.
- Integrates scssphp seamlessly into Silverstripe
- Includes flushing option (
?flushstyles
) to regenerate CSS stylesheets (ie. force undetected SCSS changes with @import). Note: this only applies to sites indev
mode. Alternatively use?flush
to flush everything including stylesheets. - Writes processed
*.scss
files intoassets/_css/
and automatically modifiesRequirements
paths - Allows custom global variables to be passed through to SCSS compiling (yaml configuration)
- Basic support for
$ThemeDir
(eg:url('#{$ThemeDir}/images/logo.png')
(see Configuration) - Automatic compression of CSS files when in
live
mode (may require an initial?flush
) - Adds any processed
editor.scss
files to TinyMCE (must be included in your front-end template) - Source maps (either inline or file) in
dev
mode only, can be disabled
- Silverstripe ^4
composer require axllent/silverstripe-scss
You need refer to your SCSS files by their full SCSS file names (eg:stylesheet.scss
).
<?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.scss');
// OR search for the scss in your $themeDirs
Requirements::themedCSS('css/stylesheet.scss');
}
}
The generated HTML will point automatically to the processed CSS file in assets/_css/
rather than the original SCSS file location, for example
<link rel="stylesheet" type="text/css" href="/assets/_css/themes-site-css-stylesheet.css?m=123456789" />
- Usage.md for usage examples.
- Configuration.md for configuration options.
- View Changelog