How to prevent font files from duplicating in dist folder?

[RachelRVasquez]

I'm converting from Webpack/Grunt to Parcel, and my project structure looks like this (simplified for example)):

|_ theme-underscores
    |_ dist (compiled JS/Sass files)
        |_ js
        |_ fonts/
                |_ bootstrap (folder, font files live here, NOT in src)
        |_ sass
                |_ main (folder)/main.css
                |_ archives (folder)/archives.css
    |_ src (original JS/Sass files)
        |_ js
        |_ sass
                |_ main.scss
                |_ archives (folder)/ archives.scss

I've set up several targets so I can ensure that I could compile the sass files into dist/css and the JS to dist/js. This works okay, although it creates folders for every sass file in dist, but whatever. The issue is the font path. I kept getting "cannot resolve" errors with my font path ../fonts/bootstrap/. Did lots of googling, found docs that say Parcel defaults to relative paths, not absolute etc. So I updated my font path to ~/dist/fonts/bootstrap/. The good news is, no errors when I compile. Yay! 🎉 The bad news, it compiles/copies font files into each dist/css folder so it ends up looking like this:

|_ theme-underscores
    |_ dist (compiled JS/Sass files)
        |_ js
        |_ fonts/
                |_ bootstrap (folder, font files live here, NOT in src)
        |_ sass
                |_ main (folder)
                         |_ main.css
                         |_ glyphicons-halflings-regular.1a33c1eb.ttf (duplicate, why?)
                         |_ glyphicons-halflings-regular.3a458e4a.woff (duplicate, why?)
                |_ archives (folder)
                         |_ archive.css
                         |_ glyphicons-halflings-regular.1a33c1eb.ttf (duplicate, why?)
                         |_ glyphicons-halflings-regular.3a458e4a.woff (duplicate, why?)
    |_ src (original JS/Sass files)
        |_ js
        |_ sass
                |_ main.scss
                |_ archives (folder)/ archives.scss

I don't understand why Parcel needs to compile font files at all and then put copies of all files into each individual dist/css folder? Why can't I just reference the fonts that permanently live in the dist folder? I tried setting publicUrl for each target but that's not working. Here is what's in my package.json (trimmed):

{
  "name": "@my_project/parcel-config",
  "version": "1.0.0",
  "description": "my project",
  "scripts": {
    "clear": "rm -r .parcel-cache",
    "build": "parcel build"
  },
  "targets": {
    "main" : {
      "source" : "src/sass/main.scss",
      "distDir" : "./dist/css/",
      "publicUrl" : "./dist/css/",
      "sourceMap" : true
    },
    "archives" : {
      "source" : "src/sass/archives/archives.scss",
      "distDir" : "./dist/css/",
      "publicUrl" : "./dist/css/",
      "sourceMap" : true
    }
  },
  "dependencies": {
    "@tinymce/tinymce-react": "^3.12.6",
    "axios": "^1.4.0",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26",
    "eslint-plugin-react": "^7.19.0",
    "google-maps-react": "^2.0.2",
    "history": "^4.10.1",
    "moment": "^2.24.0",
    "papaparse": "^5.1.1",
    "pixrem": "^5.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-logger": "^3.0",
    "redux-promise-middleware": "^6.1.2",
    "redux-thunk": "^2.2",
    "smoothscroll": "0.4"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.9.1",
    "buffer": "^6.0.3",
    "eslint": "^8.41.0",
    "parcel": "^2.9.1",
    "process": "^0.11.10"
  },
  "author": "Rachel",
  "private": true,
  "repository": "",
  "engines": {
    "node": "^15.2.1",
    "npm": "^7.12.1"
  },
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ]
  },
  "browserslist": "> 2%, last 2 versions, not dead"
}

[RachelRVasquez]

Update: So I cleared the parcel cache which looks like it was part of the issue, and while the fonts are still duplicating, it looks like it's only duplicating them once in the dist/css folder versus every sub-folder in there. Which is better, but still not ideal because it ignores the fonts in dist/fonts/bootstrap. If I remove that fonts folder though, I imagine it'll break because that's where the font path url points to. I'm going to try and place fonts in src/sass/ instead, update the urls, remove the folder from dist and see if that works.

Another thing to note, naming one of my targets "main" caused this weird issue. It was compiling a main folder in both dist/css and dist/css/main so it was making two copies. I changed the target name to "main-styles" and that fixed it. 🤔

"main-styles" : {
      "source" : "src/sass/main.scss",
      "distDir" : "./dist/css/",
      "sourceMap" : true
    },

[RachelRVasquez]

Moving the fonts to the src folder works better and only saves the fonts once in the dist folder. I'd rather have zero duplication, but I can live with it. New problem though, there are no font errors when I compile, but the font looks like this on the front-end:

It's an icon font. They're all squares like it can't find it. I set the new path to ~/src/fonts/bootstrap/. How do I fix this font issue?

[RachelRVasquez]

I'm starting to think the error logging from the Parcel compiler isn't always 100% accurate as far as font paths are concerned. I changed the url a few times, even to paths that previously threw errors after cache clearing, and I didn't get errors this time. The interesting thing is my images that also pull from a url locally are fine. So either the icon font is corrupted, or there is something with the image path that works better than the font. Still investigating.

[RachelRVasquez]

Ok so here is the solution. I made my Sass variable: $icon-font-path: "~/src/fonts/"; because I think Parcel gets confused when the stylesheet tries to find the url but I have a two level system with my stylesheets. So if I fix the url so src/sass/main.scss works, then stylesheets inside folders like src/sass/archive/archive.scss will break and visa versa, giving me that "cannot resolve" error. Hence why I had to use the ~ in the url instead.

Second, I placed the fonts folder inside the src folder. Also prevents url errors/duplication of files.

Lastly, yes, the font was corrupt. That's why I was seeing squares on the front-end. I guess because I kept moving them around trying to fix the issue. So I re-downloaded them and now everything works fine. Finally! All this headache to get Parcel to properly pull icon fonts when compared to Grunt, I didn't have to fight with that. Grunt compiled the Sass and knew how to handle the urls. Guess that's one pro over Parcel for sure.