custom styles are not displayed in editor FOSCKEditorBundle

On a symfony 6 project using Webpack Encore and FOSCKEditorBundle, i want to set the configuration so that i can use custom styles in the dropdown, as stated in the FOSCKEditorBundle doc The style dopdown is displayed, but neither in the dropdown nor in the editor, the styles are applied.

My configuration is

fos_ck_editor:
    base_path: "build/ckeditor"
    js_path:   "build/ckeditor/ckeditor.js"
    default_config: my_full_editor
    configs:
        my_full_editor:
            language: fr
            extraPlugins: "templates"
            stylesSet: "ckstyles"
            toolbar: "my_full_toolbar"
    toolbars:
        configs:
            my_full_toolbar: [ "@basicstyles", "@links", "@document", "@tools", "@editing", "/", "@clipboard", "@insert", "@paragraph", "@styles" ]
        items:
            clipboard : [ "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo" ]
            links : [ "Link", "Unlink", "Anchor" ]
            insert : [ "Image", "Table", "HorizontalRule", "SpecialChar" ]
            tools : [ "Maximize" ]
            document : [ "Source", "-", "Preview", "-", "Templates" ]
            basicstyles : [ "Bold", "Italic", "Strike", "-", "Underline", "Strike", "Subscript", "Subscript", "RemoveFormat" ]
            paragraph : [ "NumberedList", "BulletList", "-", "Outdent", "Indent", "-", "Blockquote", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" ]
            styles : [ "Styles", "Format" ]
            editing : [ "Find", "Replace", "-", "SelectAll", "-", "Scayt" ]
    styles:
        ckstyles:
            - { name: "Titre", element: "h4", styles: { "color": "#0000ff" } }
            - { name: "Titre 1", element: "h4", attributes: {"class": "ck-title1"} }
            - { name: "Titre fond 1", element: "h4", attributes: {"class": "ck-title-bg1"} }

In this configuration the css properties set are displayed : { name: "Titre", element: "h4", styles: { "color": "#0000ff" } }

but the classes are not "read" : { name: "Titre 1", element: "h4", attributes: {"class": "ck-title1"} }

I see that the css file for these custom classes is loaded on the page, but they are not available for the editor.

I've read in the CKEditor 4 documentation that for an exernal file, you have to set config.stylesSet = 'my_styles:http://www.example.com/styles.js'; The equivalent is not explained on the FOSCKEditorBundle documentation above.

So where can i load my ckeditor.scss file (included in my main app.scss file which is transformed in css with the webpack plugin) so that it is available in the editor ?

UPDATE :

I needed to load with the contentsCss option

fos_ck_editor:
    ...
    configs:
        my_full_editor:
            language: fr
            extraPlugins: "templates"
            contentsCss: ['%ckeditor_css%']
            stylesSet: "ckstyles"
            toolbar: "my_full_toolbar"
    ...
    styles:
        ckstyles:
            - { name: "Titre", element: "h4", styles: { "color": "#0000ff" } }
            - { name: "Titre 1", element: "h4", attributes: {"class": "ck-title1"} }
            - { name: "Titre fond 1", element: "h4", attributes: {"class": "ck-title-bg1"} }

with ckeditor_css defined in my services.yaml

parameters:
    ckeditor_css: 'build/app.css'

It then works because the ckeditor.scss is transformed into ckeditor.scss in the /public/build repository