axllent / silverstripe-scss
A wrapper for scssphp to integrate scss compiling directly into Silverstripe
Installs: 12 749
Dependents: 8
Suggesters: 0
Security: 0
Stars: 6
Watchers: 4
Forks: 3
Open Issues: 0
Type:silverstripe-vendormodule
Requires
- axllent/silverstripe-minifier: ^2.0
- scssphp/scssphp: ^1.12
- silverstripe/framework: ^5.0
README
A wrapper for scssphp to integrate SCSS compiling directly into Silverstripe.
SCSS files are only compiled when needed, or when a ?flush
is done.
Features
- 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
Requirements
- Silverstripe ^5
Installation
composer require axllent/silverstripe-scss
Usage
You need refer to your SCSS files by their full SCSS file names (eg:stylesheet.scss
).
Example
<?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" />
Further documentation
- Usage.md for usage examples.
- Configuration.md for configuration options.
- View Changelog