14.0
Sun, 24 May 2026 20:19:40 +0000
ws_scss
css, sass, scss
Sven Wappler
en
Table of Contents
This extension compiles the scss (sass) files into the css file format. To include your scss file, you can use the page.includeCSS typoscript command as usual.
This extensions uses the SCSSPHP compiler: https://scssphp.github.io/scssphp/
The extension comes with a cache function. That means, that the scss files will be compiled only if necessary.
You can pass values via typoscript to the scss files.
page.includeCSS {
bootstrap = fileadmin/bootstrap/sass/bootstrap.scss
bootstrap.outputfile = fileadmin/bootstrap/css/mybootstrap.css
}
You can set sass variables in typoscript in template setup part of your template:
plugin.tx_wsscss.variables {
var1 = #000
var2 = #666
}
If you combine outputfile and variables you can create different bootstrap styles with same files.
It’s possible to customize the formatting of the output CSS by changing the style.
page.includeCSS {
bootstrap = fileadmin/bootstrap/sass/bootstrap.scss
bootstrap.outputStyle = expanded
}
You can enable the source map
page.includeCSS {
bootstrap = fileadmin/bootstrap/sass/bootstrap.scss
bootstrap.sourceMap = true
}
For developing it is practical, if you force to render the template (switch off the TYPO3 template cache). Then the scss files will be compiled after modification and you can see the result of your changes. Go into your backend user settings and use this command:
|img-3|
Sven Wappler. TYPO3 Agentur Aachen