How to add mini-css-extract-plugin to Sage's bud.config.js to compile editor styles

Hi, I’m looking for an example on how to add mini-css-extract-plugin to the Sage bud.config.js and have an editor.css emit during the bud dev process.

Right now there is an issue with using the add_editor_style function with bud dev . This is due to the the editor styles emitting as Webpack HMR files. In order for the WordPress editor styles to properly load with the add_editor_style function a CSS file must be available on the disk to read. With the current Sage bud configuration, you have to stop bud dev and run bud build for editor styles to work. However, once you run bud dev the editor styles break again which is a constant obstacle.

I pieced together from the topic here that mini-css-extract-plugin is a potential solution to this issue. I was hoping someone could post an example on how this could be accomplished. I tried following the documentation at https://bud.js.org/learn/general-use/extensions but I was unable to get it working since I do not understand how format it with Sage’s bud.config.js.

2 Likes

You may find this base Sage 10 theme for FSE interesting:

Notably the separate editor styles and how styles are correctly added as editor styles.