Grapesjs: How do I reference external CSS in blockManager instead of adding each and every style in body of index.html?

Created on 26 Jul 2017  路  4Comments  路  Source: artf/grapesjs

@artf

Let's say I'm adding a new custom block called 'big-hero', and I want the custom HTML that I'm adding to that new block to reference an entire stylesheet instead of having to add each individual style in the <body>. How does one accomplish that? Where does one add an external stylesheet?

image

outdated
Source
picture cpcashion
👍1

Most helpful comment

For block specific styles I'd recommend just using style tag

content: `
<section class="big-hero">...</section>
<style>
  .big-hero{...} ....
</style>
`,

If you want to preload external stylesheet inside the canvas

var editor = grapesjs.init({
  ...
  canvas: {
    styles: [
      'https://...',
      ...
    ]
  }
});
picture artf on 2 Aug 2017
👍3 ❤2

All 4 comments

For block specific styles I'd recommend just using style tag

content: `
<section class="big-hero">...</section>
<style>
  .big-hero{...} ....
</style>
`,

If you want to preload external stylesheet inside the canvas

var editor = grapesjs.init({
  ...
  canvas: {
    styles: [
      'https://...',
      ...
    ]
  }
});
artf picture artf on 2 Aug 2017
👍3 ❤2

For block specific styles I'd recommend just using style tag

content: `
<section class="big-hero">...</section>
<style>
  .big-hero{...} ....
</style>
`,

If you want to preload external stylesheet inside the canvas

var editor = grapesjs.init({
  ...
  canvas: {
    styles: [
      'https://...',
      ...
    ]
  }
});

Hi @artf

When using