Skip to content

clawrock/magento2-sass-preprocessor

Repository files navigation

Packagist Packagist Build Status Coverage Status

Magento 2 - Sass Preprocessor module

Module for Sass processing during static content deployment with additional Gulp workflow to improve Magento 2 development speed. It compiles SCSS using scssphp and process standard @import instruction as well as @magento_import.

Installation

  1. Install module via composer composer require clawrock/magento2-sass-preprocessor
  2. Register module php bin/magento setup:upgrade
  3. Compile Sass theme using php bin/magento setup:static-content:deploy -f

Example theme

Works with

Preprocessor

  • Magento 2.2 - 2.3
  • PHP 7.0 - 7.2

Gulp

  • Node.js 10+

Gulp

  1. Install Node.js
  2. Install Gulp configuration php bin/magento dev:gulp:install
  3. Install Gulp and required dependencies npm install
  4. Define theme configuration php bin/magento dev:gulp:theme
  5. Symlink theme to pub/static folder gulp exec:[theme_key]
  6. Compile SCSS gulp scss:[theme_key]
  7. Watch for changes gulp watch:[theme_key]

It also supports LESS, instead of SCSS use less like gulp less:[theme_key]

Use additional flags to enable more watchers:

  • --phtml: reload when phtml file is changed
  • --js: reload when js file is changed

Configure theme

You can manually configure theme like in Gruntfile which is shipped with Magento or use php bin/magento dev:gulp:theme command which will configure it for you.

Reference: Grunt configuration file

Commands

Shortcut Full command
gulp build:scss:[theme] gulp exec:[theme] && gulp scss:[theme]
gulp dev:scss:[theme] gulp exec:[theme] && gulp scss:[theme] && gulp watch:[theme]

List of gulp commands:

  • gulp clean:[theme_key]
  • gulp deploy:[theme_key]
  • gulp exec:[theme_key]
  • gulp scss:[theme_key]
  • gulp less:[theme_key]
  • gulp watch:[theme_key]
  • gulp build:scss:[theme_key]
  • gulp build:less:[theme_key]
  • gulp dev:scss:[theme_key]
  • gulp dev:less:[theme_key]

BrowserSync

Pass --proxy http://magento.test argument to gulp watch:[theme_key] or gulp dev:scss[theme_key] where http://magento.test is Magento base url and BrowserSync will be enabled.

You can configure BrowserSync in dev/tools/gulp/config/browser-sync.json. Reference

Example usage

gulp dev:scss:my_theme --proxy http://m2.test --phtml

Troubleshooting

If you had previously installed Grunt, please make sure you have removed package-lock.json and node_modules folder. Then run npm install.

For development with enabled SSL please provide path to SSL key and certificate in BrowserSync configuration file.