Runtime compilation of SCSS files
After a lot of struggling, I have abandoned the idea of trying to compile SCSS server-side. There are too many pitfalls and things can go seriously wrong. Use command line tools and serve compiled CSS from disk rather than trying to compiled it at runtime.
- Allows you to use
.scssfiles directly in the view system
- Resolves and compiles import paths on the fly (no need for ruby or npm)
You can extend any
.css file with
// custom.scss @import "variables"; // this view is already included and can be extended by other plugins @import "custom2"; // you can import any other .scss view @import "external/partial"; // this can be a view residing in another plugin and named as external/_partial.scss
elgg_extend_view('_variables.scss', '_my_variables.scss'); elgg_extend_view('elgg.css', 'custom.scss');
Optionally, you can use
'vars','scss' hook to set global scss variables.
Prefix your partial scss sheets with an underscore to ensure they are not needlessly compiled, e.g.
You can use
scsssyntax in your
cssfiles. This might come handy when you want to overwrite a core css view. It is also easier to work with
.cssfiles as they are treated as simplecache resources by default.
The compiler seems to have trouble with full sheets located outside of the root. If you notice that compiler is complaining, add a view to the root and import your files located elsewhere, e.g. if your sheet is importing partials and located in
/views/default/my-theme/elements/sheet.scss, it may not compile. Add a prefixed sheet to