[QUESTIONS] Is there a quick way of renaming CSS classes on export?
Question
Hi,
since we wanna export the generated HTML and CSS and integrate it in a separate website its very probable to have CSS classes with same name and could lead to UI problems. We're thinking in renaming them after export and add a prefix on each class but don't know how to achive this or if it's a good thing.
Has anyone got similar scenarios and how you solved it?
Answers (3)
HI @iColdoCatalin , We faced the same issue and overcame this by sandboxing the css.To do so, I used sass.js (https://github.com/medialize/sass.js/)
Steps:
- enclose the cssString with your custom class. say MyCustomClass.
- Run sass.compile from the above library to convert the scss to css which is now sandboxed with the class give,
This way you wont face the issue of conflicts.
Keep me posted because we have done much more than that(We replaced the IDs with class as well)
Thanks for the suggestion @devmohitagarwal not bad as the approach. In any case, I'd prefer moving all the discussion about namespacing CSS in export here so I'd close this issue
HI @iColdoCatalin , We faced the same issue and overcame this by sandboxing the css.To do so, I used sass.js (https://github.com/medialize/sass.js/)
Steps:
- enclose the cssString with your custom class. say MyCustomClass.
- Run sass.compile from the above library to convert the scss to css which is now sandboxed with the class give,
This way you wont face the issue of conflicts.
Keep me posted because we have done much more than that(We replaced the IDs with class as well)
Thanks for the help @devmohitagarwal @artf . Much appreciated. I'm going to try out both solutions and see witch one fits better for us. I'll text you if I need more help ;)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1167
[QUESTION] export options
Hi @artf, Are there any other export options than HTML/CSS ? I'm thinking of a way to directly load the configuration from a remote server...
Issue #391
Namespace CSS?
Hi there, Is there a way to setup the grapesjs editor such that the CSS generated for the HTML content is namespaced? In other words, how t...
Issue #3832
BUG: The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...
Issue #1953
[QUESTIONS] render without iframe or get global styles and scritps
Hello, I am trying to integrate grapesjs in prestashop, but due to the iframe, I do not get the global css or js. I tried to enter the css...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.