Issues with loading assets in production

[timothyachumba]

Hi i am able to load this font file in my dev environment but when i move to production i get a 404. I'm not sure what to do. By the way I changed my css preprocessor to SASS.

@font-face
  font-family: favorit
  src: url("/assets/fonts/fl.woff2") format('woff2')
  src: url("/assets/fonts/fl.woff") format('woff')
  src: url("/assets/fonts/fl.ttf") format('truetype')
  font-weight: 300
  font-style: normal
  font-display: fallback

[arnaudjuracek]

Try to define your path relative to the bundle.css, ie:

 src: url("../fonts/fl.woff2") format('woff2')

If you have assets/fonts and assets/builds/bundle.css.

[timothyachumba]

Yeah, I tried this but I just get errors. Seems like it can't resolve that URL.

[arnaudjuracek]

Your fonts should be relative to your bundle.css, not your sass file :

• src/your-file.sass
• www/assets/builds/bundle.css
• www/assets/fonts/f1.woff

And then in your-file.sass :

// Resolve to www/assets/builds/../fonts/fl.woff2
src: url("../fonts/fl.woff2") format('woff2')

[timothyachumba]

Hmmm i thought whats what I've done. The sass file type.sass is in a subfolder but it's included n the index.sass

[arnaudjuracek]

What font paths do you call in src/libs/type.sass ?

[timothyachumba]

@font-face
  font-family: favorit
  src: url("/assets/fonts/fl.woff2") format('woff2')
  src: url("/assets/fonts/fl.woff") format('woff')
  src: url("/assets/fonts/fl.ttf") format('truetype')
  font-weight: 300
  font-style: normal
  font-display: fallback

[arnaudjuracek]

@font-face
  font-family: favorit
- src: url("/assets/fonts/fl.woff2") format('woff2') 
+ src: url("../fonts/fl.woff2") format('woff2')
  …
  font-weight: 300
  font-style: normal
  font-display: fallback

[timothyachumba]

This is the error i get

in ./src/index.sass (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url-loader??ref--5-3!./node_modules/sass-loader/dist/cjs.js??ref--5-4!./src/index.sass)
Module not found: Error: Can't resolve './fonts/fl.ttf' in '/Users/timothyachumba/Sites/deep-time/src'

[timothyachumba]

seems like it doesn't recognise the two dots, it only shows one Can't resolve './fonts/fl.ttf'

[arnaudjuracek]

Clearly './fonts/fl.ttf' and '../fonts/fl.ttf' are two differents paths. You may have broken something in the webpack configs when you changed your preprocessor to SASS.

[timothyachumba]

I'm pretty sure all I changed was line 12 in the main.config.js file

const entries = {
  'src/index.js': 'www/assets/builds/bundle.js',
- 'src/index.scss': 'www/assets/builds/bundle.css'
+ 'src/index.sass': 'www/assets/builds/bundle.css'
}