PHPackages brocksinet/vite-sass-pages - 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. brocksinet/vite-sass-pages ActiveShopware-platform-plugin[Utility & Helpers](/categories/utility) brocksinet/vite-sass-pages ========================== Use Vite for building SCSS into CSS to optimize specific pages in Shopware 6 10SCSS Since Dec 6Pushed 2y ago1 watchersCompare [ Source](https://github.com/BrocksiNet/shopware-vite-sass-pages)[ Packagist](https://packagist.org/packages/brocksinet/vite-sass-pages)[ RSS](/packages/brocksinet-vite-sass-pages/feed)WikiDiscussions main Synced today READMEChangelogDependenciesVersions (1)Used By (0) Vite and Sass (SCSS) for Shopware 6 Pages ========================================= [](#vite-and-sass-scss-for-shopware-6-pages) Theme to use Shopware 6 with Vite and Sass (SCSS) for specific pages (to have the ability to split CSS). Why --- [](#why) This theme (plugin) is a **proof of concept** to experiment and improve the CSS for Shopware 6. What ---- [](#what) - Provides **Vite** Support for Shopware 6 with default Storefront (twig) - Adds a SCSS watch and build command - Uses Lightning CSS to transform and minify the css files from dist - Outputs the build to `public/build` folder - Provides a separate `product.css` instead of `all.css` file - Under construction: Checkout, Home, Listing, Contact ... you name it - Allows to combine own scss files with core scss files (see load-path) - Uses a Rollup Plugin to generate critical css (see `PluginCritical` in `vite.config.js`) - Extends `storefront/layout/meta.html.twig` to use Symfony & Vite ([see](https://symfony-vite.pentatrion.com/guide/getting-started.html)) Limitations ----------- [](#limitations) - This theme (plugin) **expect** the Shopware core inside the `src` folder of the project (not tested with core in vendor) - This theme (plugin) does not support different SalesChannels with different theme config / color variables and so on - Currently, there are no assets files integrated like images, fonts and so on Results ------- [](#results) - From 2023-11-14 - `public/build/assets/product-84b1e655.css` 283.46 kB │ gzip: 43.89 kB - `public/build/assets/all-0d8fa2e9.css` 381.57 kB │ gzip: 51.69 kB How to set up ------------- [](#how-to-set-up) - Copy all the plugin files to `custom/plugins/ViteSassPages` - Require the plugin via composer `composer require brocksinet/vite-sass-pages` - Execute plugin refresh `bin/console plugin:refresh` - Install and activate the plugin `bin/console plugin:install ViteSassPages --activate` - Update `config/bundles.php` file and add `Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],` - Add file `config/packages/pentatrion_vite.yaml` with these content: ``` pentatrion_vite: crossorigin: anonymous ``` - NPM install (from root folder): `cd custom/plugins/ViteSassPages/ && npm i && cd ../../../` - *Hint:* Update your URLs for the critical CSS generation in `vite.config.js`, if you do not use `http://localhost:8000/` How to use it ------------- [](#how-to-use-it) - Start Shopware with **devenv** - Use inside `devenv shell` for development (directory: `cd custom/plugins/ViteSassPages/`) - SCSS watch command `npm run scss:watch` - Vite dev command `npm run dev` ### Further optimization [](#further-optimization) - You can use **purgecss** to remove not used classes (directory: `cd custom/plugins/ViteSassPages/`) - e.g. `npx purgecss --css ../../../public/build/assets/all-48786481.css --content ../../../src/Storefront/Resources/views/**/*.html.twig` *(You need to update the file name for the css file to purge)* Known problems -------------- [](#known-problems) - Window console tells you: `module is not defined` comment out: ``` if (module.hot) { module.hot.accept(); } ``` in `src/Storefront/Resources/app/storefront/src/main.js` - The font `inter-fontface` scss is not imported - Add `.vite` to your `.gitignore` file in project root ### Health Score 13 — LowBetter than 1% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity2 Limited adoption so far Community7 Small or concentrated contributor base Maturity20 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3763023?v=4)[Björn Meyer](/maintainers/brocksinet)[@BrocksiNet](https://github.com/BrocksiNet) --- Top Contributors [![BrocksiNet](https://avatars.githubusercontent.com/u/3763023?v=4)](https://github.com/BrocksiNet "BrocksiNet (3 commits)") ### Embed Badge ![Health badge](/badges/brocksinet-vite-sass-pages/health.svg) ``` [![Health](https://phpackages.com/badges/brocksinet-vite-sass-pages/health.svg)](https://phpackages.com/packages/brocksinet-vite-sass-pages) ``` ### Alternatives [botman/driver-web Web driver for BotMan 86690.6k7](/packages/botman-driver-web)[laminas/laminas-navigation Manage trees of pointers to web pages in order to build navigation systems 162.7M74](/packages/laminas-laminas-navigation)[elfsundae/laravel-gravatar The easiest way to generate Gravatar avatar URL. 388.9k](/packages/elfsundae-laravel-gravatar)[judev/php-intervaltree Interval Tree implementation in PHP 1141.8k1](/packages/judev-php-intervaltree) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)