Browser Development

Browser development allows developers to create SCSS files and store the data in configuration for version control. The editor configuration is portable in three formats CSS, SCSS and Drupal configuration and the editor is flexible and encourages component style development allowing it to be used on multiple projects.

If used in conjunction with layout_builder_styles it allows an editor to add any class to a block or section using the layout manager giving them the ability to create pages that are highly flexible and needing less assistance from a developer.

The module can be used with any theme and the compiled SCSS creates a CSS file that can be added to any library's file and mitigates any security and performance issues by the module being installed.

What can it do?

1. SCSS editor with the ability to create multiple files.
2. Live editor that displays updates created by the developer.
3. Automatic creation of SCSS files on the file system.
4. Automatically compiles SCSS into CSS and saves it.
5. Saves SCSS in configuration.

Images showing the modules functionality

REQUIREMENTS

Drupal 10 or 11 are needed as well as 'scssphp/scssphp' library which is installed
in the vendor directory when using composer.

browser_development_assist is not required but is recommended. It accesses Browser Development configuration so that this module can be uninstalled on production mitigating possible security and performance issues.

INSTALLATION

Install using Composer then use Drush or the Drupal UI to enable the module.

CONFIGURATION

There is no configuration to install just navigate to
admin/browser-development/editor and start coding your SCSS