Silverstripe - Include Stylesheets and Scripts

Question

I have set up a fresh installation of Silverstripe and created a new theme. Now i want to include a CSS in the Page.ss, but I get an error message that the file cannot be found. I would like to include the file from the theme folder under "my-site/themes/my-theme/css/style.css". However, the integration using "themedCSS('style')" only works if the file has been integrated again under "my-site/public/_resources/themes/my-theme/css/style.css". I have tried this in all variations, but it only works if the CSS file exists in both places at the same time.

Since I can't imagine that this is best practice, I wonder what I'm missing. Furthermore, the styles under "/themes/my-theme/css/style.css" are completely ignored, if both are included.

Answer 1

In SilverStripe version 4 all resource files you want the browser to be able to request must be available in the public folder. You don't need to manually copy the files over to the public folder from your app theme folder, instead what you can do is define what files to expose in your composer.json file.

// composer.json
...
"extra": {
        ...
        "expose": [
            "themes/my-theme/css",
            "themes/my-theme/js",
            // Any other files or folders you want to expose
        ]
    },

Then when you run the composer vendor-expose command in your terminal it will expose the listed files to the public folder.

By default the expose command will create a symlink between the public and project folder, so all your changes will be reflected there as well, this way you don't need to run the expose command after each change, only when you add new files to expose.

It's also possible to import resource files through page controllers, like so:

// A page controller, e.g. "PageController.php"

    protected function init()
    {
        parent::init();
        self::myImports();
    }

    private static function myImports() {
        // Files must be available in the public folder:
        // - "/public/_resources/themes/my-theme/css/app.css"
        // - "/public/_resources/themes/my-theme/js/app.js"
        Requirements::css('./themes/my-theme/css/app.css');
        Requirements::javascript('./themes/my-theme/js/app.js');
    }