CSS link via `{asset}` helper doesn't seem to work properly

Themes
1

Hey there :wave:

My name is Jordan Vidrine, I am a Designer for Discourse, so its awesome to see ya’ll using our software for the forum! We are migrating our blog over to Ghost, and I am working on creating a simple theme for the site.

I am working through tweaking the casper-dev theme in order to learn more about theming with Ghost.

One issue I seem to be bumping into is with using the {asset} helper.

Here is how I am using it in the head of my default.hbs

<link rel="stylesheet" type="text/css" href="{{asset "built/test.css"}}" />

Here is the content of that css file.

// test.css

p.test-text {
  font-weight: bold;
  color: #ffffff;
  font-size: 32px;
}

I am using yarn dev and the css file is properly being created & added to assets/built/css/test.css just fine on edits.

I have added a short line of html to the default.hbs file like so, in order to generate the following:

...
 <p class="test-text">Hello World</p>
 <div class="gh-head-menu">
...

image
image1492×374 67.4 KB

The css doesn’t seem to be targeting my html though, and upon investigation I see that the css in the generated html has some versioning syntax added to it → /assets/built/test.css?v=b707af6428

Upon viewing the “versioned” file in the sources explorer in google chrome, I am not seeing any of my custom css in the file. Only this:

/*# sourceMappingURL=test.css.map */

For now I am not using the {asset} helper as it doesn’t append the version text to the file, and this seems to work, but caching issues arises :grimacing:

<link rel="stylesheet" type="text/css" href="/assets/built/test.css" />

I am new to this, so I may be overlooking something very simple, but some help would be much appreciated!

Edit

It seems that running ghost restart fixes the issue of the css not showing up in the sources panel. Is this expected behavior? Needing to run ghost restart in addition to having yarn dev running as well?