PHPackages cundd/assetic - 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. cundd/assetic ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) cundd/assetic ============= Assetic for TYPO3 CMS 6.0.2(3mo ago)2312[1 issues](https://github.com/cundd/CunddAssetic/issues)MITJavaScriptPHP ^8.1 Since Dec 31Pushed 2mo ago1 watchersCompare [ Source](https://github.com/cundd/CunddAssetic)[ Packagist](https://packagist.org/packages/cundd/assetic)[ Docs](https://github.com/cundd/CunddAssetic)[ RSS](/packages/cundd-assetic/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (5)Dependencies (4)Versions (35)Used By (0) Cundd Assetic ============= [](#cundd-assetic) Integrate the [Assetic asset management framework](https://github.com/assetic-php/assetic) into your TYPO3 CMS installation. Installation ------------ [](#installation) 1. `composer require cundd/assetic` 2. Load the Site Set into the TYPO3 Site 3. Configure the assets you want to be loaded 4. Include the plugin the `page.headerData```` // Example: page.headerData.40001 =< plugin.tx_assetic ``` Usage ----- [](#usage) ### Basic [](#basic) ``` # File: config/sites/my-site/settings.yaml or EXT:site_package/Configuration/Sets/Site/settings.yaml assetic: stylesheets: - file: EXT:site_package/Resources/Private/Stylesheets/main.css ``` ### Multiple assets [](#multiple-assets) ``` # File: config/sites/my-site/settings.yaml or EXT:site_package/Configuration/Sets/Site/settings.yaml assetic: stylesheets: - file: EXT:site_package/Resources/Private/Stylesheets/reset.css - file: EXT:site_package/Resources/Private/Stylesheets/style.css ``` ### With SASS [](#with-sass) If your web server and web user are configured to be able to use the `sass` command line tool, from within your TYPO3 installation, you could use the following: ``` # File: config/sites/my-site/settings.yaml or EXT:site_package/Configuration/Sets/Site/settings.yaml assetic: stylesheets: - file: EXT:site_package/Resources/Private/Stylesheets/main.scss ``` ### With other CSS preprocessors [](#with-other-css-preprocessors) Analog you can use other CSS preprocessors. The [Assetic Github Page](https://github.com/assetic-php/assetic?tab=readme-ov-file#filters) provides a (incomplete) list of all filters provided by the installed Assetic version. Development mode ---------------- [](#development-mode) To make sure that the assets are compiled each time the frontend page is refreshed, you can enable the development mode: ``` plugin.tx_assetic { development = 1 } ``` By default Cundd Assetic is configured not to compile files if NO backend user is logged in. To allow file compilation without a logged in backend user you can change the `allowDeveloperFeaturesWithoutLogin` configuration in Site Settings. Advanced -------- [](#advanced) ### Configure a filter [](#configure-a-filter) Some filters allow further customization. The Sass filter e.g. provides the method `addImportPath` which allows you to add another path to look for imported Sass files. Cundd Assetic provides an interface to invoke such functions. ``` # File: config/sites/my-site/settings.yaml or EXT:site_package/Configuration/Sets/Site/settings.yaml assetic: stylesheets: - file: EXT:site_package/Resources/Private/Stylesheets/main.scss functions: # Add functions that will be called on the filter addImportPath: ProjectPath:/vendor/ ``` If you want to invoke a method multiple times you can just add a numeric prefix to the function name: ``` # File: config/sites/my-site/settings.yaml or EXT:site_package/Configuration/Sets/Site/settings.yaml assetic: stylesheets: - file: EXT:site_package/Resources/Private/Stylesheets/main.scss functions: # Add a numeric prefix to allow the function to called multiple times 0-addImportPath: ProjectPath:/vendor/ 1-addImportPath: EXT:site_package/Resources/Private/Library/ ``` #### Development flags [](#development-flags) To apply functions only in development mode, entries can be added with key `developmentFunctions`: ``` # File: config/sites/my-site/settings.yaml or EXT:site_package/Configuration/Sets/Site/settings.yaml assetic: stylesheets: - file: EXT:site_package/Resources/Private/Stylesheets/main.scss functions: setStyle: compressed developmentFunctions: setStyle: expanded ``` ### Configure the filter binary paths [](#configure-the-filter-binary-paths) In some cases you may have to specify the path to a CSS preprocessor to match your system's configuration. This can be done through the `filterBinaries` configuration. The configuration keys are determined by replacing `\` with `_` and converting the string to lowercase: ``` 1. \AsseticAdditions\Filter\DartSassFilter 2. AsseticAdditions_Filter_DartSassFilter 3. asseticadditions_filter_dartsassfilter ``` ``` # File: config/sites/my-site/settings.yaml or EXT:site_package/Configuration/Sets/Site/settings.yaml assetic: settings: filterBinaries: # Change the path to the filter binaries. I.e. if node.js is installed # into /usr/local/bin/ assetic_filter_lessfilter: /usr/local/bin/node # The binary for filter class \AsseticAdditions\Filter\DartSassFilter asseticadditions_filter_dartsassfilter: /usr/local/bin/sass ``` Command line ------------ [](#command-line) Assetic provides three different CLI commands. ### assetic:compile [](#asseticcompile) Compiles the assets and exit. ``` vendor/bin/typo3 assetic:compile ``` ### assetic:watch [](#asseticwatch) Watches for file changes in `EXT:client` and re-compiles the assets if needed. ``` vendor/bin/typo3 assetic:watch ``` ### assetic:livereload [](#asseticlivereload) Starts a [LiveReload](http://livereload.com/) compatible server that watches for file changes in `EXT:client` and re-compiles the assets if needed. The necessary JavaScript can be loaded be enabling `addJavascript` in Site Settings. ``` vendor/bin/typo3 assetic:livereload ``` CSP & LiveReload -------------------- [](#csp--livereload) To use LiveReload with CSP enabled add `wss://your-domain.tld:35729/livereload` to `connect-src` in the site's CSP configuration file (`config/sites/your-site/csp.yaml`). See the [TYPO3 documentation](https://docs.typo3.org/permalink/t3coreapi:content-security-policy-site) for further details. ### Example [](#example) ``` mutations: - mode: "extend" directive: "connect-src" sources: - "wss://your-domain.tld:35729/livereload" ``` Additional tools ---------------- [](#additional-tools) ### Standalone auto-refresh tool [](#standalone-auto-refresh-tool) Cundd Assetic provides a JavaScript tool that checks the CSS and JavaScript assets on the page for changes and automatically reloads them. For more information and usage visit [/Resources/Public/JavaScript](/Resources/Public/JavaScript). Sponsored by ------------ [](#sponsored-by) [![](https://camo.githubusercontent.com/cc5a1bac4ca58e976da5d5084ea4373392e5a8239ed5308c4b3aada5da3f34a7/68747470733a2f2f7777772e69726573756c74732e6c692f6769746875622d6c6f676f2e706e67)](http://www.iresults.li) ### Health Score 50 — FairBetter than 96% of packages Maintenance73 Regular maintenance activity Popularity17 Limited adoption so far Community9 Small or concentrated contributor base Maturity83 Battle-tested with a long release history Bus Factor1 Top contributor holds 99.6% 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 ~157 days Recently: every ~23 days Total 30 Last Release 77d ago Major Versions 3.3.1 → 4.2.02024-03-07 4.2.0 → 5.0.02024-12-03 5.1.2 → 6.0.0-alpha12025-09-29 6.0.1 → 7.0.0-alpha.12026-01-28 6.0.2 → 7.0.0-beta2026-03-02 PHP version history (4 changes)v1.1PHP >=5.3.1 3.0.0PHP ^7.4 || ^8.0 2.1PHP ^7.1 5.0.0PHP ^8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/da109c98da5adda4f3818c747dbba428d1e80c06ece9e51aabd716ba76024ef4?d=identicon)[cundd](/maintainers/cundd) --- Top Contributors [![cundd](https://avatars.githubusercontent.com/u/743122?v=4)](https://github.com/cundd "cundd (492 commits)")[![MattiasNilsson](https://avatars.githubusercontent.com/u/1718315?v=4)](https://github.com/MattiasNilsson "MattiasNilsson (2 commits)") --- Tags asseticassetscss-preprocessorcundd-asseticfilterphptypo3typo3-cmscompressionassetsminificationtypo3 ### Embed Badge ![Health badge](/badges/cundd-assetic/health.svg) ``` [![Health](https://phpackages.com/badges/cundd-assetic/health.svg)](https://phpackages.com/packages/cundd-assetic) ``` ### Alternatives [kriswallsmith/assetic Asset Management for PHP 3.7k48.9M161](/packages/kriswallsmith-assetic)[assetic/framework Asset Management for PHP 1001.4M20](/packages/assetic-framework)[konstantin-kuklin/assetic-static-gzip-bundle Provide static gzip compression for css,js files via AsseticBundle 149.2k1](/packages/konstantin-kuklin-assetic-static-gzip-bundle)[mmanos/laravel-casset An asset management package for Laravel 4. 102.6k](/packages/mmanos-laravel-casset) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)