Bootstrap class styles not appeding while getting getCss()

[senthil177cse]

i have tried to generate css in JSON but i am not getiing bootstrap css while export the getCSS()..
i have attached my screenshot here you can see the "selectors":["col-12"] col-12 is bootstrap class for this bootstrap css style not getting while getCss()...
below i have lis my code....

command(editor) {
editor.Modal.setTitle('CSS JSON')
.setContent(<textarea style="width: 100%; height: 250px;"> ${JSON.stringify(editor.getCss({json: true}))} </textarea>)
.open();

}

[senthil177cse]

@artf any update for this please......
i am waiting for your reply i have urgent basis resolve this issue pls...

[senthil177cse]

@artf can you give solution for this please?

[ronaldohoch]

@senthil177cse i think you're tryng to do it in wrong way. The full bootstrap file shouldn't goes in cssJson, but the import should added in the final html.

[senthil177cse]

@ronaldohoch
i dont want to go full bootstrap css for ex: if i am adding button Test
here btn and btn-success bootstrap css need to add in cssJson right?

[ronaldohoch]

@senthil177cse
Grapesjs and as far i know, no other framework does tree-shaking to css code :/

[Ju99ernaut]

You could try loading the bootstrap css as a string during init, that way the style manager has access to it. You're currently loading bootstrap css through links so the editor has no access to it, getCss only returns css that has been parsed by the editor.

However this might cause performance issues, once tried it for tailwindcss but it was too large and the editor failed to parse it. Other than this you'd probably need to remove unused css manually.