Using the CSS in the frontend

The library can be attached to fields that output wysiwyg, so for example in node--full.html.twig, you could add:

{% block before %}
  {{ attach_library('compony/wysiwyg-content') }}
{% endblock %}

A good use case would be to add it to a field that is using a field formatter that uses wysiwyg by default: Field with basic HTML wysiwyg and Field with Full HTML wysiwyg components.

Using the CSS in the backend

The library can be passed on to the CKEditor by linking to the CSS files from compony.info.yml:

# Define the css files that have to theme the wysiwyg in the backend.
ckeditor_stylesheets:
  - components/_global/dist/style.css
  - components/wysiwyg-content/dist/cke__iframe.css

The cke__iframe.css is a copy of the contents of wysiwyg-content.css but every line in CSS is prefixed with the class that CKEditor is using: .cke_editable.

Pitfalls

If you change something in wysiwyg-content.scss, make sure you also save the cke__iframe.scss so the CSS is generated.