-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support URL rewriting for static assets referenced in CSS files. #14
Comments
thanks for the contribution, we'll have a look at the PR |
Hi @ittaibaratz, the purpose of the The I've investigated a little and the You can adjust these settings when you run I can imagine that you want to avoid ejecting your project. If that's so you can take a look at:
We want to avoid making these kind of changes in |
Thanks @ifahrentholz , I will consider your suggestions. |
@ittaibaratz did you ever find a solution to this? I am having a similar problem with Angular. My clientlib builds and compiles the SCSS, updates the import paths relative to the build, then aem-clientlib-generator moves the files which then breaks the relative linking. |
Sorry for reviving this topic :-) Got a similar issue. I am using remixicon (web font usage) and aem clientlib updates my font face URL by adding 'clientlib-site/css/' From remixicon.css
From site.css (generated by aem clientlib)
I tried rewriting the URL of the font-face in webpack because AEM needs 'resources' as for public assets. However, again, clientlib appends 'clientlib-site/css' (path relative to the css file, I guess) I also tried to create a clientlib-font (I did those 3 configurations: 1. css and resources folders 2. css containing all css and fonts 3. resources folder with all css and fonts) but same, AEM changed the font-face url. Is there a way to tell clientlib to not rewrite the url of specific files? Thanks. |
Hi @ittaibaratz, Hi @kevinolivar, you could try to use the base configuration. Example:
|
I'll close this issue since there is no response. |
Hi @ifahrentholz, yeah sorry for that. Actually, I solved that via webpack. Eg. copying the font into the resources folder and "resolve" (string replace) path directly.
I may give it a shot with the 'base' option of the clientlib generator. Thanks anyway! |
This is related to adobe/aem-spa-project-archetype#61
When using Create React App (And other frameworks using webpack), the static assets are automatically copied to the build folder and their URL is updated. For example, in my CSS file I have the following font family definition:
@font-face { font-family: AvenirBook; src: url("resources/AvenirLTStd-Book.otf") format("opentype"); }
When my app is compiled, the result CSS will have the following URL:
src:url(/static/media/AvenirLTStd-Book.ecb0c2ae.otf)
I can copy the static assets to the AEM clientlib however with the resources configuration, however the URL which appears in the CSS will no longer work, as AEM needs a URL such as
/etc.clientlibs/mysamplespa/clientlibs/mysamplespa-react/resources/AvenirLTStd-Book.ecb0c2ae.otf
My suggestion to resolve this is to add the ability to rewrite the CSS files through regex.
So to solve the problem above I want to be able to automatically replace "/static/media" with "/etc.clientlibs/mysamplespa/clientlibs/mysamplespa-react/resources" in the CSS files.
The text was updated successfully, but these errors were encountered: