clawrock/magento2-sass-preprocessor

Module for Sass processing during static content deployment

Installs: 9 134

Dependents: 0

Suggesters: 0

Security: 0

Stars: 11

Watchers: 3

Forks: 4

Open Issues: 0

Type:magento2-module

1.1.3 2020-09-02 07:31 UTC

This package is auto-updated.

Last update: 2022-04-29 00:56:39 UTC


README

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.