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/artf/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/artf/grapesjs-parser-postcss.git
$ cd grapesjs-parser-postcss
Install dependencies
$ npm i
Start the dev server
$ npm start
BSD 3-Clause