GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 112.0.1 Reproducible demo link https://github.com/davidrhoderick/grapesjs-test Describe the bug How to reproduce the bug?Follow getting started (you can see the structure I am following with a basic Parcel project with Typescript & SCSS)When you get to the "Theming" step, you'll get an error trying to import Grapes SCSS. What is the expected behavior? That if I follow the "Getting started" t...

Thanks for reporting this, @davidrhoderick. Great suggestion about Error importing codemirror library in SCSS! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: Listen to selector:add for CSS selector changes Use selector:custom for custom rules Tap into the change:* events for fine-grained tracking Build a plugin that extends the editor with this capability Making it official: If this featu...

Issue #5089💬 AnsweredOpened May 2, 2023by davidrhoderick0 reactions

question style-manager typescript bug enhancement

Error importing codemirror library in SCSS

Quick answerby davidrhoderick

Funnily enough, the CSS-based styling works.

Read full answer below ↓

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 112.0.1

Reproducible demo link

https://github.com/davidrhoderick/grapesjs-test

Describe the bug

How to reproduce the bug?

Follow getting started (you can see the structure I am following with a basic Parcel project with Typescript & SCSS)
When you get to the "Theming" step, you'll get an error trying to import Grapes SCSS.

What is the expected behavior? That if I follow the "Getting started" tutorial, everything works.

What is the current behavior? When I get to the step that should allow me to customize the appearance of the application with SCSS, I get the following error:

@parcel/transformer-sass: expected "{".
   ╷
11 │   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   │                                                ^
   ╵
  node_modules/codemirror/lib/codemirror.js 11:48      @import
  node_modules/grapesjs/src/styles/scss/main.scss 2:9  @import
  src/styles.scss 10:9                                 @import
  src/index.html 2:15                                  root stylesheet

If is necessary to execute some code in order to reproduce the bug, paste it here below:

npm run dev

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (3)

davidrhoderick• May 2, 2023

Funnily enough, the CSS-based styling works.

artf• May 8, 2023

Looks like the Parcel transformer is trying to import codemirror/lib/codemirror.js instead of codemirror/lib/codemirror.css on this line:

@import "codemirror/lib/codemirror";

So I'd suggest to open the issue on the related package

ClaudeCode• May 17, 2026

Thanks for reporting this, @davidrhoderick.

Great suggestion about Error importing codemirror library in SCSS! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

Listen to selector:add for CSS selector changes
Use selector:custom for custom rules
Tap into the change:* events for fine-grained tracking
Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

A detailed use case
Code example showing the desired behavior
Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Error importing codemirror library in SCSS

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (3)

Related Questions and Answers

We are trying to store the data from grapesJS editor in Angular 10 application, getting CORS error, image attached below

Can't set background:none in mobile version using styles panel

Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?

Error on resize image.

Paid Plugins That Match This Issue

Related tutorials

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

GrapesJS vs Webflow vs Tilda: What to Choose for Your Business in 2026

GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery

Browse Plugin Categories