Issue #2363✓ SolvedOpened October 31, 2019by CatalinCernea2 reactions

Is there a quick way of renaming CSS classes on export?

快速解答by devmohitagarwal2

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...

Read full answer below ↓

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)

👍 Most helpfuldevmohitagarwalNovember 1, 2019

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:

  1. enclose the cssString with your custom class. say MyCustomClass.
  2. 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)

artfNovember 2, 2019

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

CatalinCerneaNovember 4, 2019

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:

  1. enclose the cssString with your custom class. say MyCustomClass.
  2. 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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.