PHPackages clawrock/magento2-sass-preprocessor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. clawrock/magento2-sass-preprocessor ActiveMagento2-module[Utility & Helpers](/categories/utility) clawrock/magento2-sass-preprocessor =================================== Module for Sass processing during static content deployment 1.1.3(5y ago)1012.1k2OSL-3.0PHPCI failing Since Oct 1Pushed 5y ago2 watchersCompare [ Source](https://github.com/clawrock/magento2-sass-preprocessor)[ Packagist](https://packagist.org/packages/clawrock/magento2-sass-preprocessor)[ RSS](/packages/clawrock-magento2-sass-preprocessor/feed)WikiDiscussions master Synced yesterday READMEChangelog (5)Dependencies (9)Versions (6)Used By (0) [![Packagist](https://camo.githubusercontent.com/2b58645fd18c8699b6c002d4e05e44665be42917ae4e562ff449f9da9fff9537/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f636c6177726f636b2f6d6167656e746f322d736173732d70726570726f636573736f722e737667)](https://packagist.org/packages/clawrock/magento2-sass-preprocessor)[![Packagist](https://camo.githubusercontent.com/5994498b5d7ab17aa25d0bd7f9827c76324ba4ab49a1fb967c66156cb0ca9a70/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f636c6177726f636b2f6d6167656e746f322d736173732d70726570726f636573736f722e737667)](https://packagist.org/packages/clawrock/magento2-sass-preprocessor)[![Build Status](https://camo.githubusercontent.com/73873bf25a1af496f0000bc6bdc3c4d9d171ad15e62e3e69ba135e0a2fac5eb9/68747470733a2f2f7472617669732d63692e6f72672f636c6177726f636b2f6d6167656e746f322d736173732d70726570726f636573736f722e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/clawrock/magento2-sass-preprocessor)[![Coverage Status](https://camo.githubusercontent.com/e0712f04a5f1995753231f957a01113fc618a09d242c26616e2a8b3c5ee6ec3e/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f636c6177726f636b2f6d6167656e746f322d736173732d70726570726f636573736f722f62616467652e737667)](https://coveralls.io/github/clawrock/magento2-sass-preprocessor) Magento 2 - Sass Preprocessor module ==================================== [](#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 ------------ [](#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 ------------- [](#example-theme) - [clawrock/magento2-theme-blank-sass](https://github.com/clawrock/magento2-theme-blank-sass) Works with ---------- [](#works-with) #### Preprocessor [](#preprocessor) - Magento 2.2 - 2.3 - PHP 7.0 - 7.2 #### Gulp [](#gulp) - Node.js 10+ Gulp ---- [](#gulp-1) 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 [](#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](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/tools/using_grunt.html#grunt_config) #### Commands [](#commands) ShortcutFull 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 [](#browsersync) Pass `--proxy http://magento.test` argument to `gulp watch:[theme_key]` or `gulp dev:scss[theme_key]` where is Magento base url and BrowserSync will be enabled. You can configure BrowserSync in `dev/tools/gulp/config/browser-sync.json`. [Reference](https://www.browsersync.io/docs/options) #### Example usage [](#example-usage) `gulp dev:scss:my_theme --proxy http://m2.test --phtml` Troubleshooting --------------- [](#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](https://www.browsersync.io/docs/options/#option-https) in BrowserSync configuration file. ### Health Score 34 — LowBetter than 77% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity27 Limited adoption so far Community11 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor1 Top contributor holds 95.2% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~175 days Total 5 Last Release 2079d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/19371023?v=4)[ClawRock](/maintainers/clawrock)[@clawrock](https://github.com/clawrock) --- Top Contributors [![makao](https://avatars.githubusercontent.com/u/690371?v=4)](https://github.com/makao "makao (20 commits)")[![varrt](https://avatars.githubusercontent.com/u/54077079?v=4)](https://github.com/varrt "varrt (1 commits)") --- Tags developmentgulpmagentomagento2preprocessorsassscss ### Code Quality TestsPHPUnit Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/clawrock-magento2-sass-preprocessor/health.svg) ``` [![Health](https://phpackages.com/badges/clawrock-magento2-sass-preprocessor/health.svg)](https://phpackages.com/packages/clawrock-magento2-sass-preprocessor) ``` ### Alternatives [baldwin/magento2-module-url-data-integrity-checker Magento 2 module which can find potential url related problems in your catalog data 281773.3k](/packages/baldwin-magento2-module-url-data-integrity-checker)[yireo/magento2-webp2 Magento 2 module to add WebP support to the Magento frontend 2091.2M7](/packages/yireo-magento2-webp2)[smile/module-store-delivery Smile Store Delivery 23348.7k1](/packages/smile-module-store-delivery)[mage-os/module-theme-optimization Page transitions and speculative loading rules for Magento 418.0k](/packages/mage-os-module-theme-optimization)[graycore/magento2-graphql-introspection-cache 1015.2k](/packages/graycore-magento2-graphql-introspection-cache) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)