{"id":23418405,"url":"https://github.com/clawrock/magento2-sass-preprocessor","last_synced_at":"2025-04-12T11:33:04.824Z","repository":{"id":56953507,"uuid":"151079577","full_name":"clawrock/magento2-sass-preprocessor","owner":"clawrock","description":"Magento 2 SASS preprocessor","archived":false,"fork":false,"pushed_at":"2020-09-02T07:33:10.000Z","size":41,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T06:11:35.561Z","etag":null,"topics":["development","gulp","magento","magento2","preprocessor","sass","scss"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clawrock.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-01T11:45:54.000Z","updated_at":"2025-03-20T17:10:03.000Z","dependencies_parsed_at":"2022-08-21T08:20:43.020Z","dependency_job_id":null,"html_url":"https://github.com/clawrock/magento2-sass-preprocessor","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clawrock%2Fmagento2-sass-preprocessor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clawrock%2Fmagento2-sass-preprocessor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clawrock%2Fmagento2-sass-preprocessor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clawrock%2Fmagento2-sass-preprocessor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clawrock","download_url":"https://codeload.github.com/clawrock/magento2-sass-preprocessor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248560048,"owners_count":21124584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["development","gulp","magento","magento2","preprocessor","sass","scss"],"created_at":"2024-12-23T00:18:36.568Z","updated_at":"2025-04-12T11:33:04.807Z","avatar_url":"https://github.com/clawrock.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Packagist](https://img.shields.io/packagist/v/clawrock/magento2-sass-preprocessor.svg)](https://packagist.org/packages/clawrock/magento2-sass-preprocessor)\n[![Packagist](https://img.shields.io/packagist/dt/clawrock/magento2-sass-preprocessor.svg)](https://packagist.org/packages/clawrock/magento2-sass-preprocessor)\n[![Build Status](https://travis-ci.org/clawrock/magento2-sass-preprocessor.svg?branch=master)](https://travis-ci.org/clawrock/magento2-sass-preprocessor)\n[![Coverage Status](https://coveralls.io/repos/github/clawrock/magento2-sass-preprocessor/badge.svg)](https://coveralls.io/github/clawrock/magento2-sass-preprocessor)\n\n# Magento 2 - Sass Preprocessor module\nModule 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`. \n\n## Installation\n1. Install module via composer `composer require clawrock/magento2-sass-preprocessor`\n2. Register module `php bin/magento setup:upgrade`\n3. Compile Sass theme using `php bin/magento setup:static-content:deploy -f`\n\n## Example theme\n* [clawrock/magento2-theme-blank-sass](https://github.com/clawrock/magento2-theme-blank-sass)\n\n## Works with\n#### Preprocessor\n* Magento 2.2 - 2.3\n* PHP 7.0 - 7.2\n#### Gulp\n* Node.js 10+\n\n## Gulp\n1. Install Node.js\n2. Install Gulp configuration `php bin/magento dev:gulp:install`\n3. Install Gulp and required dependencies `npm install`\n4. Define theme configuration `php bin/magento dev:gulp:theme`\n5. Symlink theme to pub/static folder `gulp exec:[theme_key]`\n6. Compile SCSS `gulp scss:[theme_key]`\n7. Watch for changes `gulp watch:[theme_key]`\n\nIt also supports LESS, instead of SCSS use less like `gulp less:[theme_key]`\n\nUse additional flags to enable more watchers:\n- `--phtml`: reload when phtml file is changed\n- `--js`: reload when js file is changed\n\n#### Configure theme\nYou 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.\n\nReference: [Grunt configuration file](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/tools/using_grunt.html#grunt_config)\n\n#### Commands\n| Shortcut                  | Full command                                                   |\n| ------------------------- | -------------------------------------------------------------- |\n| `gulp build:scss:[theme]` | `gulp exec:[theme] \u0026\u0026 gulp scss:[theme]`                       |\n| `gulp dev:scss:[theme]`   | `gulp exec:[theme] \u0026\u0026 gulp scss:[theme] \u0026\u0026 gulp watch:[theme]` |\n\nList of gulp commands:\n- `gulp clean:[theme_key]`\n- `gulp deploy:[theme_key]`\n- `gulp exec:[theme_key]`\n- `gulp scss:[theme_key]`\n- `gulp less:[theme_key]`\n- `gulp watch:[theme_key]`\n- `gulp build:scss:[theme_key]`\n- `gulp build:less:[theme_key]`\n- `gulp dev:scss:[theme_key]`\n- `gulp dev:less:[theme_key]`\n\n#### BrowserSync\nPass `--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.\n\nYou can configure BrowserSync in `dev/tools/gulp/config/browser-sync.json`.\n[Reference](https://www.browsersync.io/docs/options)\n\n#### Example usage\n`gulp dev:scss:my_theme --proxy http://m2.test --phtml`\n\n## Troubleshooting\nIf you had previously installed Grunt, please make sure you have removed package-lock.json and node_modules folder. Then run `npm install`.\n\nFor development with enabled SSL please [provide path to SSL key and certificate](https://www.browsersync.io/docs/options/#option-https) in BrowserSync configuration file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclawrock%2Fmagento2-sass-preprocessor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclawrock%2Fmagento2-sass-preprocessor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclawrock%2Fmagento2-sass-preprocessor/lists"}