Issue #2388Opened November 7, 2019by asieraduriz2 reactions

[Question] - How to import styles from <link> to be rendered when dragging block to canvas

Question

My situation:
I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS.
Now, I am able to render the component properly by integrating it with Backbone.
But my question is, can I use <link tags to download my own custom styles, so that I can see them properly within the canvas?

I have tried doing so, but to no success. I wouldn't want to manually download every CSS of my UI Library, but if I render any component, I would like that the component styling matches the <link imported styles.

Answers (3)

asieradurizNovember 8, 20191 reactions

Hello @pouyamiralayi Thanks for the quick answer. However, this would seem that won't be sufficient, since what I'm looking for is a way to see my rendered component with the styles that I want, but also, if I export the project, to include these files

artfNovember 13, 20191 reactions

Just init the editor with your <link> inside the template, it will be loaded in the canvas and you will be able to see it in your export code

pouyamiralayiNovember 7, 20190 reactions

Hi @fasaas you can inject your global styles this way:

const editor = grapesjs.init({
    canvas:{
        styles: [ 'https://...1.css', 'https://...2.css' ]
    }
})

the same goes for your custom scripts. more on this here cheers!

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.