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
.
- Install module via composer
composer require clawrock/magento2-sass-preprocessor
- Register module
php bin/magento setup:upgrade
- Compile Sass theme using
php bin/magento setup:static-content:deploy -f
- Magento 2.2 - 2.3
- PHP 7.0 - 7.2
- Gulp 3.9
- Node.js v8 or later
- Install Node.js
- Install Gulp configuration
php bin/magento dev:gulp:install
- Install Gulp and required dependencies
npm install
- Define theme configuration
php bin/magento dev:gulp:theme
- Symlink theme to pub/static folder
gulp exec:[theme_key]
- Compile Scss
gulp scss:[theme_key]
- Watch for changes
gulp watch:[theme_key]
Pass --proxy http://magento.test
argument to gulp watch
or gulp watch:[theme_key]
where http://magento.test is Magento base url and Browsersync will be automatically enabled.
- If you have previously installed Grunt, please make sure you have removed package-lock.json and node_modules folder. Then run
npm install
.