Why isn't my custom CSS applying in my custom section?

Store Design
1

I am trying to reference a custom .js and .css in a custom section. While .js is working, the .css is not.

First I added .css to the asset.

DD5053695_0-1667523591293.png
DD5053695_0-1667523591293.png427×398 6.66 KB

Next, I below lines to theme.liquid.

DD5053695_0-1667525154409.png
DD5053695_0-1667525154409.png1267×1092 78.4 KB

Lastly, I created a new liquid under section and attempted to reference the .js and .css. The .js works, but not .css.

DD5053695_2-1667523810507.png
DD5053695_2-1667523810507.png1594×1210 98.4 KB

I verified the code offline and it worked as expected.

Is there a way for me to know if my custom .css is loaded when I referenced it in theme.liquid?

What could be the reasons why my style aren’t changing at all for my custom section?

2

The screenshots of theme.liquid show a .scss file is being reference in one then not in another and nothing shows that it exists.

3

I updated the screenshot. It was something I was trying based on other similar problems and didn’t work anyway.