Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Fonts in the react application do not work with the .scss extension

I use Vite with React + SCSS.

And I have fonts.scss where I use all my fonts for project:

@font-face {
    font-family: "JosefinSans";
    src: url("./JosefinSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "JosefinSans";
    src: url("./JosefinSans-Bold.ttf") format("truetype");
    font-weight: 700;
}

But when I try to import my fonts on different path of my project like this:

@import "./assets/fonts/fonts.scss";
@import "./assets/colors/colors.scss";

body {
    margin: 0;
    font-family: "JosefinSans";
    background-color: $border-light;
}

My fonts are not working. They only work when I compile to .css and use import with a .css file.

I tried checking if it works with .css files, and it does. However, I only want to use .scss in my project.

In the package.json file, I have sass, and I checked if any other .scss code like variables works. Everything works, but the fonts don’t work.

Tags:

3

Answers


  1. 0

    There seems to be an issue with how the path is resolved when importing fonts from a SCSS file. Make sure routes are configured correctly.

    1. Check Vite’s configuration for SCSS:

       import { defineConfig } from 'vite';
 import reactRefresh from '@vitejs/plugin-react-refresh';
 import { resolve } from 'path';

 export default defineConfig({
   plugins: [reactRefresh()],
   css: {
     preprocessorOptions: {
       scss: {
         additionalData: `@import "${resolve(__dirname, 'src/assets/fonts/fonts.scss')}";`,
       },
     },
   },
 });

    2. Check if the font files are copied to the output directory:
      vite.config.js:

       export default defineConfig({
     build: {
         assetsInlineLimit: 0,
         outDir: 'dist',
         assetsDir: 'assets',
     },
 });

    Please check my solution and leave me feedback if it’s not working so that I can fix it.
    I will offer another solutions.

    Login or Signup to reply.
  2. 0

    In Sass, there are two types of @import statements: @import and @import url(). Both are used for importing stylesheets, but they have subtle differences:

    1. @import:
      The @import rule is a Sass-specific feature and does not require the url() syntax.
      It is used to import Sass or CSS files into your Sass stylesheet.
      When using @import, Sass will compile the imported stylesheet directly into the current stylesheet, combining all styles into a single file.
      The file path specified in @import is resolved relative to the current Sass file’s location.

      @import 'path/to/your/file';

    2. @import url():
      The @import url() syntax is a standard CSS function used to import external resources, such as fonts or stylesheets, and is often used to import external resources from the web, such as fonts hosted on a CDN.
      Using @import url() causes the specified resources (e.g. font files) to be dynamically loaded by the browser when the stylesheet is parsed.

      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

    Login or Signup to reply.
  3. 0

    You can try using using ~ before the path so vite will resolve the path correctly relative to your project root also make sure that you have the right path so your code would be like this

    @font-face {
font-family: "JosefinSans";
src: url("~./assets/fonts/JosefinSans-Regular.ttf") format("truetype");
font-weight: 400;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search