Css and js files not found by custom theme

Questions
,
1

Silverstripe Version: 4.1.0-0

Question: css and js files not found by custom theme

Hello! I’ve started working on a custom theme but it’s unable to retrieve the .css and .js files. I’ll walk through the steps I took:

  • Launched a new SilverStripe application onto Google Cloud Platform using Bitnami.
  • Created a clone of the ‘simple’ theme called ‘simple2’.
  • Updated the mysite.yml file to point to ‘simple2’ instead of ‘simple’.
  • opened the website using ?flush

According to everything I’ve read, this should be enough to give me a working clone of the ‘simple’ theme, but instead all of the .css and .js files are missing. I know the right theme is being used because if I update one of the template files, it’s reflected when I refresh the page. But all of the .css and .js files are giving me the old 404.

I’ve tried a couple of things. In the Page.ss file, I’ve tried using:

<% require css('resources/themes/simple2/css/typography.css') %>

Instead of:

<% require themedCSS('typography') %>

But it makes no difference. The other thing I’ve tried in the PageController.php file is to add this to the init() fuction:

Requirements::css('resources/themes/simple2/css/typography.css');

But again, no difference. I’ve had a good rummage around but can’t find anything that would suggest that the original ‘simple’ .css files can be found but not the ‘simple2’ ones.

(Note: at the moment I haven’t set up a developer environment, I’ve launched an ssh console from Google Cloud and am making the changes directly there, I’m not sure if that should make a difference though)

1 Like
2

Check that your composer.json in simple2 is updated with its own name;

Since you are using SSH, you can try running the command
composer vendor-expose
That will symlink resources/themes/simple2 to your actual themes/simple2 directory

2 Likes
4

Thank you for answer, it has solved my issue, which was similar to the one asked initially :slight_smile:

3

With SS4 you can use something like:

<% require css($resourceURL('themes/<theme-name>/dist/css/app.css')) %>

This picks it automatically from the theme or resources or - on SS4.1 with public folder, from public/resources.

See SS4: Replacement for good ol’ $ThemeDir: or loading themed resources - SilverStrip.es for a more in-deep explanation how to expose your assets and include them in your theme.