This plugin enables custom CSS parser via PostCSS. If you import templates from HTML/CSS or embed custom codes (eg. by using grapesjs-custom-code plugin) you definitely need to use this one to avoid issues with styles, check here why.
Requires GrapesJS v0.14.33 or higher
- Plugin name:
grapesjs-parser-postcss
This plugin has no options
- CDN
https://unpkg.com/grapesjs-parser-postcss
- NPM
npm i grapesjs-parser-postcss
- GIT
git clone https://github.com/GrapesJS/parser-postcss.git
Directly in the browser
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-parser-postcss.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
// ...
plugins: ['grapesjs-parser-postcss'],
});
</script>Modern javascript
import grapesjs from 'grapesjs';
import parserPostCSS from 'grapesjs-parser-postcss';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [parserPostCSS],
});Clone the repository
$ git clone https://github.com/GrapesJS/parser-postcss.git
$ cd grapesjs-parser-postcssInstall dependencies
$ npm iStart the dev server
$ npm startBSD 3-Clause