Download the PHP package clawrock/magento2-sass-preprocessor without Composer
On this page you can find all versions of the php package clawrock/magento2-sass-preprocessor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download clawrock/magento2-sass-preprocessor
More information about clawrock/magento2-sass-preprocessor
Files in clawrock/magento2-sass-preprocessor
Package magento2-sass-preprocessor
Short Description Module for Sass processing during static content deployment
License OSL-3.0 AFL-3.0
Informations about the package magento2-sass-preprocessor
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
- 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
Example theme
Works with
Preprocessor
- Magento 2.2 - 2.3
- PHP 7.0 - 7.2
Gulp
- Node.js 10+
Gulp
- 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]
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.
All versions of magento2-sass-preprocessor with dependencies
leafo/scssphp Version ^0.7.7
magento/module-developer Version ^100.2
magento/module-store Version ^100.2|^101.0