-3

I'm trying to modify the CSS in the Gutenberg module to change the editor layout. Gutenberg uses SASS files to generate the CSS.

I tried editing the CSS files directly, which I recognize I shouldn't do with generated code. This ended up having no effect on the module's output, and the old CSS is somehow cached despite clearing all caches. I also tried instead modifying the SASS directly, but I don't know how to trigger a re-compile. I suspect the CSS is distributed pre-compiled.

What can I do to properly modify and update the SASS/generated/cached CSS?

| |
  • My approach to solving the core problem, how to change the editor's CSS, seems to have been misguided. However, I'm still wondering about how one would trigger a recompile and how/why the CSS is apparently being cached by Drupal despite the cache clear. – glenviewjeff Jul 25 at 19:23
  • 4
    Sass is its own "thing", there are a number of different ways to compile it (see sass-lang.com/install for the simplest tool). If the module authors intended it to be re-compiled, they probably would've included instructions or even a simple node project to do so. Some contrib themes do this for example. You can generally assume that anything shipped with a module is not intended to be edited, as you'll lose the changes when the module is updated – Clive Jul 25 at 19:28
  • @Clive thanks, I was starting to suspect that SASS is not integrated into Drupal. Yes, I definitely expected all of this would be overwritten if/when the module was updated. I feel like this is a gaping hole in Drupal, which I'd learned when receiving answers to this question which some in the community felt was lacking focus. – glenviewjeff Jul 25 at 19:35
  • 2
    A hole in Drupal? Nah, definitely not. Sass is completely unrelated to Drupal; your CMS framework shouldn’t have an opinion on how you decide to compile your assets, that’s for each developer to decide. All drupal needs to do is make sure it doesn’t stop you using these tools, which it doesn’t, and provides a path to override everything, which it does. Sounds like your beef is with the Gutenberg authors for choosing to use a tech you weren’t familiar with. But to be fair, most people would use sass or less in this scenario – Clive Jul 26 at 11:22
  • 1
    Sass does not need to integrate to Drupal and vice versa, there is no integration point - you just compile it out to CSS. There are dozens of tools and methods to do that. The only thing it sounds like you could do in this case is swap the CSS being loaded with the libraries yml definition, and load your own modifications. – Kevin Jul 26 at 12:19
3

Another way to compile sass is to use gulp. There's a slightly dated general purpose tutorial here.

And there's a git gist for the Drulma theme I wrote here.

What gulp allows you to do is to chain various processes together, so you can, for example:

  1. Compile the sass with sass
  2. Minify the sass with cssnano
  3. If you're using a framework like Bootstrap or Bulma, automatically delete the css rules included in the framework for stuff your site doesn't use using Uncss (to do this, you need to list all the possible CSS your site might use, which you can do with the Simple Styleguide module)
  4. Compile and minify your js too

This is obviously more than just compiling SASS, but if you're going to go ahead and set up a workflow to compile sass, you might find it worth the investment in time to optimize the resulting files, too.

| improve this answer | |
0

There's no need to edit the CSS directly, as the module already allows for styling. To style the Gutenberg editor, follow these instructions:

You can "inject" stylesheets and scripts into the editor using the libraries-edit at [your_theme].gutenberg.yml configuration file. Example:

my-theme.gutenberg.yml:

libraries-edit:
  - my-theme/editor

my-theme.libraries.yml:

editor:
  css:
    theme:
      css/editor.css: {}
      css/some-component.css
  js:
    js/even-javascript.js
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.