Add custom CSS preprocessor (like Sass)
What's in this topic
This topic describes how to add a custom CSS preprocessor. Adding Sass support is used as an example.
Sample Sass module
Magento has a sample module-sample-scss module implementing the Sass preprocessor.
You can view it as example when adding your custom preprocessor. Or install the module as is if you need to add Sass preprocessing. Installing a module is described in the repository’s Readme file.
Adding a custom preprocessor
For the sake of compatibility, upgradability and easy maintenance, do not edit the default Magento code. Create a new custom module for your customizations.
For details about creating a module refer to the Magento PHP Developer Guide.
Step by step instruction
To add a custom preprocessor, take the following steps:
In your module directory, add the adapter PHP class. It must implement the
Magento\Framework\View\Asset\ContentProcessorInterfaceinterface. For illustration, see the adapter for Sass in the sample module: module-sample-scss/Preprocessor/Adapter/Scss/Processor.php
If in your custom preprocessor, the syntax of the importing directives is different from
@magento_import, you must implement custom processor classes. You can view the default Magento processors for reference: lib/internal/Magento/Framework/Css/PreProcessor/Instruction.
<your_module_dir>/etc/di.xml, declare the following:
- your custom adapter
- your processor (if relevant)
- the renderer for the client-side compilation (if relevant)
The content of your
di.xml will be similar to the following: