Make path specifications in SCSS possible again

[dbruening]

Previously it was possible to specify the paths for images, web fonts etc. in SCSS with absolute or relative paths.

Example:

$baseurlImage: '/typo3conf/ext/sitepack/Resources/Public/Images/';

.test {
  background-image: url("#{$baseurlImage}myimage.png";
}

In the composer-based TYPO3 12 installation, the extensions are only accessible in a folder with a hash value.

Example: _assets/4e00a9e760b4d24f4c30eb4dcb59e59f/Icons/favicon.ico

As the folder name is not known or could change, it cannot be stored in the paths in SCSS. As the compiled CSS is stored in the folder typo3temp/DynCss, a relative path like '../../Images/' is also not possible.

In the branch typo3-12 the integration works via:

$baseurlIconSitepackage: 'EXT:sitepackage/Resources/Public/Icons/';

.test {
  background-image: url("#{$baseurlIconSitepackage}my-icon.svg");
}

Other paths or SCSS variables, such as the following example, will not work:

$baseurlFontSitepackage: 'EXT:sitepackage/Resources/Public/Fonts/';

@font-face {
  src: url('#{$baseurlFontSitepackage}my-font.woff2') format('woff2');
}

Translated with DeepL.com (free version)

[kaystrobach]

Thank you, I have to investigate this.