Include CSS Style for my custom backend module

Using Neos & Flow
1

Hi,

I created a backend module. Everything works but I could not figure out how to include CSS. I tried to add below code to Packages/Site/Vendor.Site/Resources/Private/Layouts/Default.html.
<link rel="stylesheet" href="{f:uri.resource(path: 'Styles/Backend.css', package: 'Vendor.Site)}" media ="all" />

But It the CSS file is not included. Any help please?

2

Hello Rocky,

if i read the source-code right you can add the keys additionalResources.styleSheets and additionalResources.javaScripts to the Settings for your module.

See https://github.com/neos/neos-development-collection/blob/master/Neos.Neos/Resources/Private/Templates/Backend/Module/Index.html

Regards, Martin

3

Hi Martin,

Thanks for the reply!

I looked at the code again. My style is actually included but overwritten by Neos default style.

4

Hi,
sorry for the late answer @rockymaxsource, but have you tried with something like the following in your Settings.yaml file?

TYPO3:
  Neos:
    modules:
      [...]
        submodules:
          [...]
            additionalResources:
              styleSheets:
                - 'resource://path/to/custom/stylesheet/stylesheet.css'

Bests,
Nicola

5

Yes the neos default styles are quite agressive inside the neos-div. Usually this can be solved with a style that has a higher specifity in the css-selector.

When i tied to use css-modules(JS) inside a neos-backend-module the same topic hit me hard. In that case adding some specifity is not simle and i ended up putting my js code into a seperate iframe.