CSS not available in wp-admin during Sage development

Hi I have a problem with the Sage theme. All I did was that I downloaded it from the Sage website and then added some CSS. I wanted to modify the contents in the TinyMCE editor such that the content (the text of all posts and pages) in wp-admin looks the same as the actual website. So here’s an example.

.content {
color: red;

The body tag of the iframe in wp-admin (the TinyMCE editor) has the content class so the text color should be red. When I build the assets (using yarn build), the final CSS file is generated and the text in wp-admin is in fact red as expected.

However, when I run yarn start and then access wp-admin editor (for example: edit a post), I don’t see the text in red. I checked the console and noticed that the CSS file that I had generated previously using yarn build is missing and it gives me a 500 error:

Then I realized that the command yarn start removes all automatically generated assets including the CSS file that I’m missing in wp-admin. That’s probably because on the frontend (the actual site) the CSS file is not needed as it is replaced by some auto-generated CSS file that is automatically generated every time there is a change made in the source files. That’s OK for the frontend but the wp-admin is now missing the styles. The auto-generated CSS is not included there and the CSS file from the assets is missing because it was deleted when I ran yarn start.

How can I solve this issue with missing styles in wp-admin during yarn start development? I can think of three options but don’t have enough knowledge to implement them:

  1. Inject the auto-generated CSS file from yarn start to wp-admin editor, OR
  2. Keep the CSS for wp-admin editor in a separate file, OR
  3. Do not remove the assets when running yarn start.

What are your thoughts on this?

You’re gonna have more problems than this loading wp-admin in a browsersync session.

Editing site content while running yarn start is not the intended workflow. We recommend editing site content, and developing the site theme, separately.

1 Like

That’s a fair point. Thanks.