https://github.com/cundd/cunddassetic
Assetic for TYPO3 CMS
https://github.com/cundd/cunddassetic
assetic assets css-preprocessor cundd-assetic filter php typo3 typo3-cms
Last synced: 11 months ago
JSON representation
Assetic for TYPO3 CMS
- Host: GitHub
- URL: https://github.com/cundd/cunddassetic
- Owner: cundd
- Created: 2012-12-15T21:25:48.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2025-07-02T11:46:42.000Z (11 months ago)
- Last Synced: 2025-07-02T12:42:56.761Z (11 months ago)
- Topics: assetic, assets, css-preprocessor, cundd-assetic, filter, php, typo3, typo3-cms
- Language: JavaScript
- Size: 2.05 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cundd Assetic
Integrate the [Assetic asset management framework](https://github.com/assetic-php/assetic) into your TYPO3 CMS installation.
## Installation
1. `composer require cundd/assetic`
2. Include the static TypoScript files
3. Configure the assets you want to be loaded
## Usage
### Basic
plugin.CunddAssetic {
stylesheets {
custom_identifier_for_the_asset = fileadmin/stylesheets/style.css
}
}
### Multiple assets
plugin.CunddAssetic {
stylesheets {
identifier_for_asset_1 = fileadmin/stylesheets/reset.css
identifier_for_asset_2 = fileadmin/stylesheets/style.css
}
}
### 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:
plugin.CunddAssetic {
stylesheets {
custom_identifier_for_the_asset = fileadmin/bootstrap/lib/bootstrap.scss
}
}
### 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 with the installed Assetic version.
## Development mode
To make sure that the assets are compiled each time the frontend page is refreshed, you can enable the development mode:
plugin.CunddAssetic {
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 `allow_compile_without_login` configuration, in TypoScript or the Constant editor.
plugin.CunddAssetic {
allow_compile_without_login = 1
}
## Advanced
### Configure a filter
Some filters allow futher customization. The Sass filter e.g. provides the method `addImportPath` which enables you to add another path to look for imported scss files. Cundd Assetic provides an interface to invoke such functions through TypoScript.
plugin.CunddAssetic.stylesheets.custom_identifier_for_the_asset {
### Add functions that will be called on the filter
functions {
addImportPath = fileadmin/local/sass/
}
}
If you want to invoke a method multiple times you can just add a numeric prefix to the function name:
plugin.CunddAssetic.stylesheets.custom_identifier_for_the_asset {
functions {
# Add a numeric prefix to allow the function to called multiple times
0-addImportPath = fileadmin/local/sass/
1-addImportPath = fileadmin/core/sass/
}
}
### 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 `filter_binaries` directive in TypoScript:
plugin.CunddAssetic {
filter_binaries {
# 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 \Assetic\Filter\Sass\ScssFilter
assetic_filter_sass_scssfilter = /usr/local/bin/sass
}
}
## Command line
Assetic provides three different CLI commands.
### assetic:run
Compiles the assets and exit.
```bash
vendor/bin/typo3 assetic:run
```
### assetic:watch
Watches for file changes in fileadmin/ and re-compiles the assets if needed.
```bash
vendor/bin/typo3 assetic:watch
```
### assetic:livereload
Starts a [LiveReload](http://livereload.com/) compatible server that watches for file changes in fileadmin/ and re-compiles the assets if needed. The TypoScript constant `module.tx_assetic.settings.livereload.add_javascript` should be set to 1.
```bash
vendor/bin/typo3 assetic:livereload
```
## Additional tools
### Standalone auto-refresh tool
Cundd Assetic provides a JavaScript that observes 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
[](http://www.iresults.li)