Question 363965 in CSS Question posted in
Some basic documentation can be found here.

Css – url() for fonts differs in development / production

Using vite / sass

I got a path variable to get the font’s path:

// Static method, works in develop
$fa-font-path           : "../assets/font-awesome-6-fonts" !default;

// Vite alias, works in develop, too
$fa-font-path           : url("@fa6path") !default;

Vite.config.mjs:

resolve: {
    alias: {
      '@fa6path': process.env.NODE_ENV === 'production' ? path.resolve('/assets/font-awesome-6') : path.resolve('frontend/assets/font-awesome-6-fonts'),
    }
  }

Project structure is:

root/frontend/assets/font-awesome-6-fonts for the font files

root/frontend/styles/font-awesome-6/variables.scss for the fa6 style files

root/vite.config.mjs for vite config file

In develop it works just fine. In production the url won’t get resolved with the vite alias. It simply prints url(%22@fa6path%22) in the path and won’t take the alias.

I don’t see any other method but the vite alias to solve this, as I can’t set a static url in the stylesheets for prod/dev.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it a different way, getting rid of the alias completely. Maybe the quotation marks have been the problem and it's just resolved incorrectly.

    Using this syntax and replacing every $fa-font-path by @/fonts/font-awesome-6-fonts (also moved it in a different folder) did the trick:

    src: url(@/fonts/font-awesome-6-fonts/some-font-here)

  2. 0

    The problem may arise due to how the Vite is handling the aliasing paths during the production build.

    One possible solution is to use a CSS variable to store the font path and then dynamically set its value based on the environment. Here is your SASS file:

    $fa-font-path: "../assets/font-awesome-6-fonts" !default;
$fa-font-path-dev: url("@fa6path") !default;

$fa-font-path-prod: "../assets/font-awesome-6" !default;
$fa-font-path: if($isProd, $fa-font-path-prod, $fa-font-path-dev);

    Then, you need to define the isProd variable in your Vite configuration file to differentiate between development and production environments. Here’s how you can update your Vite configuration:

    // vite.config.mjs
import { defineConfig } from 'vite';

const isProd = process.env.NODE_ENV === 'production';

export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `$isProd: ${isProd};`
      }
    }
  },
  resolve: {
    alias: {
      '@fa6path': isProd ? '/assets/font-awesome-6' : 'frontend/assets/font-awesome-6-fonts',
    }
  }
});

    With the help of this approach, the isProd variable in the SASS preprocessor options is based on the environment.

    Then, in your SASS file, it chooses the appropriate font path based on whether it’s in production or development. This way, you can use Vite aliases in development and still have a fallback for production.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search