Use SCSS files for MediaWiki styling
The MediaWiki SCSS extension provides a ResourceLoader module capable of compiling SCSS.
In the MediaWiki installation directory, add
requiresection in the file
Still in the MediaWiki installation directory, from a command line run
composer update "mediawiki/scss".
Load the extension by adding the following line to
wfLoadExtension( 'Scss' );
Done: Navigate to Special:Version page on your wiki to verify that the extension is successfully installed.
An SCSS module is defined much like any other style module. See the manual for
It should also be possible to add the module definition to the
of a MediaWiki extension. See
There are some additional keys, that may be used:
class: This is mandatory. It selects the class to be used for the module. For SCSS the value has to be
styles: Not really an additional key, but it has extended semantics. This key contains the list of style files of the module. Each file can optionally be given a position to influence the order in which the files are compiled. Allowed values for the position are
If no position is given,
mainwill be assumed.
All files of one module will be compiled together, i.e. variables, mixins etc. will be shared between them.
variables: An array of variables and values to override the SCSS variables in the style files. This allows to change values (e.g. colors, fonts, margins) without having to modify the actual style files.
cacheTriggers: Compiling SCSS is expensive, so sompiling results are cached. This option lists files that when changed will trigger a flushing of the cache and re-compiling the style files.
All files on this list will be checked for each web request. To minimizs the load on the file system and the time to build the page it is not advisable to just add all style files to this list.
Here is an example definition:
$wgResourceModules[ 'ext.MyExtension.styles' ] = [ 'class' => 'SCSS\\ResourceLoaderSCSSModule', 'localBasePath' => $localBasePath, 'remoteBasePath' => $remoteBasePath, 'position' => 'top', 'styles' => [ 'modules/ext.MyExtension.foo.scss' => 'main', 'modules/ext.MyExtension.bar.scss' ], 'variables' => [ 'red' => '#ff0000', 'green' => '#00ff00', 'blue' => '#0000ff', ], 'cacheTriggers' => [ 'LocalSettings.php', 'composer.lock', ], ];
$egScssCacheType can be set to request a specific cache type to be used for
the compiled styles. To disable caching of SCSS styles completely (e.g. during
$egScssCacheType = CACHE_NONE;. This should obviously never
be done on a production site.
You can use the SCSS extension under the GNU General Public License, version 3 (or any later version).