Search code examples
npmwebpackfont-facebourbon

bourbon sass font-face font location compile error with npm

I am using bourbon and using their font-face sass function.

See my sass below.

$panton: (

    ("Panton-Light-Italic", 'italic', 300),
    ("Panton-Light", 'normal', 300),

    ("Panton-Regular", 'normal', 400),
    ("Panton-Regular-Italic", 'italic', 400),

    ("Panton-Bold", 'normal', 600),
    ("Panton-Bold-Italic", 'italic', 600),

);

@each $p in $panton {
  @include font-face(
      "Panton",
      "../fonts/panton/#{nth($p,1)}",
          ("woff2", "woff")
  ) {
    font-style: #{nth($p,2)};
    font-weight: #{nth($p,3)};
  }
}

But I am having issue compiling and getting this error.

ModuleNotFoundError: Module not found: Error: Can't resolve '../../node_modules/bourbon/core/bourbon/fonts/panton/Panton-Bold-Italic.woff' in '/Users/joshcranwell/Sites/werksmotorsport-v2/src/scss'

For some reason its looking for the fonts inside bourbon node_modules folder when actually it's located here...

enter image description here

This is my webpack.mix.js which is working perfectly for font awesome with no addition variable overrides. All my required font awesome fonts get compiled to the distribution as expected.

 mix.js('src/js/theme.js', 'dist/js')
    .js('src/js/dashboard.js', 'dist/js')
    .sass('src/scss/screen.scss', 'dist/css')
    .sass('src/scss/dashboard.scss', 'dist/css')
    .setPublicPath('dist')
    .setResourceRoot('../');

But some not compiling when using bourbon font-face.

Any help would be awesome.

Update

If I use ~/../fonts/panton/#{nth($p,1)} on the url it compiles but doesn't move the fonts to the distribution folder.

Plus the console errors are showing odd locations (no dist folder)

enter image description here

Solution

  • Perhaps not quite the answer you're looking for but I suspect this is Bourbon conflicting with Webpack somewhere along the way. It may be more difficult to diagnose than its worth - unless you're heavily using Bourbon throughout your project? I'd say its relatively redundant and you could achieve this with not much more code -

    $panton: (

    ("Panton-Light-Italic", 'italic', 300),
    ("Panton-Light", 'normal', 300),

    ("Panton-Regular", 'normal', 400),
    ("Panton-Regular-Italic", 'italic', 400),

    ("Panton-Bold", 'normal', 600),
    ("Panton-Bold-Italic", 'italic', 600),

);

@each $p in $panton {
  @font-face {
    font-family: "Panton";
    src: url("../fonts/panton/#{nth($p,1)}.woff2") format('woff2'),
         url("../fonts/panton/#{nth($p,1)}.woff") format('woff'),
    font-style: #{nth($p,2)};
    font-weight: #{nth($p,3)};
  }
}

    Give that a go perhaps?