Yarn build/start: "Module not found: Error: Can't resolve ./fonts/[font].ttf", one period instead of two

[Matt_Tanner1]

The error looks pretty straightforward, but the problem is that I know my path is right… I’ve done this on countless other Sage projects with no problems, and I’ve checked things maybe a dozen times now.

In resources/assets/styles/common/_fonts.scss:
@font-face {
font-family: “Open Sans”;
src: url(“../fonts/OpenSans-Regular.ttf”) format(“truetype”);
}

In resources/assets/fonts, I have a file called OpenSans-Regular.ttf.

When I try to build, I get an error:

Module build failed: ModuleNotFoundError: Module not found: Error: Can’t resolve ‘./fonts/OpenSans-Regular.ttf’ in ‘/Users/user/Sites/example.com/site/web/app/themes/path/resources/assets/styles’

I notice that in the error, there is only one period before /fonts, whereas in my font-face declaration there is 2 periods to indicate going up one directory. Is there a simple explanation for that?

If I try building with my font-face declarations commented out, it’s successful but there is no fonts directory created in the dist folder. But I read that the fonts directory will only show up there if the fonts are being used in the scss files so that’s probably a dead end.

Why does the error make it seem like it’s not going up one directory like I’m telling it to? Everything seems to be written right and named correctly and other projects aren’t having this problem and I don’t get it and my head is like aaaaaaaaaaaaaaaaaaaaa

Here’s a loom video demonstrating (no sound): https://www.loom.com/share/f8335b7aac284352873e67bc73ff9f26

Update: Just found out I can’t get images either. I just tried to use an SVG from the assets/images folder in a CSS pseudo element and I got the same error, with the same single-period instead of two like I typed out.

Also someone pointed out in the replies that I need to go up two directories so I feel like I need to add this: after building, when the assets are in the dist folder, all css gets combined into dist/styles/main.css and I only need to go up a single directory to reach the dist/images and dist/fonts directories. I did try it with 4 periods (../../fonts) a few times, but it doesn’t work. In all sage projects I’ve worked on, I’ve always used two periods and that works correctly.

[Atari]

Don’t you need to go up two directories? From /assets/styles/common to /assets/fonts?

src: url("../../fonts/OpenSans-Regular.ttf") format(“truetype”); .

[Matt_Tanner1]

It looks that way, but that’s actually incorrect (and I’ve tried it, just because).
The reason is that when running yarn build, both fonts and styles get compiled and placed into sage/dist/fonts/. and sage/dist/styles/main.css. So after build it only needs to go up one directory.

[Matt_Tanner1]

Ok I found a solution to this. The package.json from Sage 9.0.10 is a no-go for me, for some reason. I copied the package.json from Sage 9.0.9 into my project, ran yarn and yarn build, aaaaand now we’re good.

What specifically is different between the two package.json files, I’m not sure. I haven’t had time to take a closer look to figure out what dependencies specifically need to be downgraded.