Add the following either to functions.php or to a subfile included in functions.php:
```php
/**
* Display custom theme styles in the gutenberg editor
*/
function rootid_base_theme_gutenberg_setup() {
add_theme_support('editor-styles');
// note that this can be
add_editor_style( 'dist/styles/gutenberg-editor.css' );
}
add_action( 'after_setup_theme', 'rootid_base_theme_gutenberg_setup' );
```
The styles get loaded inside `<style>` tags at the top of the editor page. You can try including your regular theme styles, but since the editor really only deals with the content and the theme styles have all kinds of extra stuff for the header, footer, sidebar, (you know, the whole site!)... :shrug: It might work better to compile separate stylesheets -- the regular theme stylesheet that @imports *all* the sub-stylesheets, and an editor-specific stylesheet that only @imports the subsheets that apply to page/post content.
Anyhow, if you want to compile separately, in gulpfile.js you can set up a separate gulp task to compile the editor styles:
You probably already have the `css` task -- just add an `editor-css` task! (Adapt to fit the directory structure and file names of your theme...)
```js
gulp.task('css', function () {
return gulp.src(config.assetPath + "/styles/main.scss")
.pipe(sassGlob())
//.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
//.pipe(sourcemaps.write())
.pipe(gulp.dest(config.distPath + "/styles"));
});
gulp.task('editor-css', function () {
return gulp.src(config.assetPath + "/styles/gutenberg-editor.scss")
.pipe(sassGlob())
//.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
//.pipe(sourcemaps.write())
.pipe(gulp.dest(config.distPath + "/styles"));
});
```
Then add the `editor-css` task to the watch function:
```js
gulp.watch(config.assetPath + "/styles/**/*.scss", ['css', 'editor-css']);
```