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:
- Inject the auto-generated CSS file from
yarn startto wp-admin editor, OR - Keep the CSS for wp-admin editor in a separate file, OR
- Do not remove the assets when running
yarn start.
What are your thoughts on this?