Getting the most out of fonts with Webpack sass-loader

I recently set up a custom font in my project like this:

$font-path: '~@/assets/fonts/';
@font-face {
    font-family: 'mainFont';
    font-weight: 300;
    font-style: normal;
    src: url('#{$font-path}mainFont/mainFont.eot') format('eot'),
    url('#{$font-path}mainFont/mainFont.woff2') format('woff2'),
    url('#{$font-path}mainFont/mainFont.woff') format('woff'),
    url('#{$font-path}mainFont/mainFont.ttf') format('truetype'),
    url('#{$font-path}mainFont/mainFont.svg#mainFont') format('svg');
}

Despite the fact that the build, which is created with vue.js webpack, seems to be functioning properly, the application is unable to load the fonts due to incorrect directory references in the src URLs. Following suggestions to make the $font-path relative to the output file's folder (as recommended), the build fails as it cannot locate the fonts.

cssfontswebpackvue.jssass-loader

Answer №1

To utilize the file-loader, incorporate a configuration like the following in your rules (taken from a sample project):

{
    test: /\.(woff2?|ttf|otf|eot|svg)$/,
    exclude: /node_modules/,
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]'
    }
}

By doing this, the files will be duplicated into your build directory and the correct URLs to those files will be included in your CSS.

The next step is to integrate resolve-url-loader into your scss rule:

{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
    })
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

androidhtmlcssbrowser

What is the method for creating a checkbox in CSS that includes a minus symbol inside of it?

Can you create a checkbox with a minus "-" symbol inside using just html and css? I attempted to achieve this with JavaScript by using: document.getElementsByTagName("input")[0].indeterminate = true; However, the requirement is to accomplish this using ...

htmlcss

Tips on concealing the scrollbar only when a particular element is visible

I inserted the following code into my index.html file: <head> <style> body::-webkit-scrollbar { display: none; } </style> </head> This code successfully hides the scrollbar. My goal is to only h ...

cssangular

Is there a way to confine a jquery script within the dimensions of the container div?

I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom ...

javascriptjqueryhtmlcss

Tips for effectively utilizing Vuelidate to display errors selectively after the user has completed input:

I have implemented a form using Bootstrap-Vue with some Vuelidation code applied to it. <b-form @submit.prevent="onSubmit"> <input type="hidden" name="_token" :value="csrf" /> <transition-group name="fade"> <b-form ...

javascriptvue.jsbootstrap-vuevuelidate

Troubleshooting issues with applying styles in Vue framework when configured with webpack

I'm facing an issue with setting up the Vue framework using webpack. Specifically, I'm having trouble with styles not being applied when included in the <style> tag within single file components. Despite following several tutorials on this ...

javascripthtmlvue.jswebpacksass

The Cross-Origin Request has been blocked due to the Same Origin Policy prohibiting access to the remote resource. The reason for this is that the CORS preflight response was unsuccessful

SERVERSIDE // Establishing Headers app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE"); res.header("Access-Control-Allow-Headers ...

javascriptvue.jsexpresscors

Perform Jquery trigger on mobile by clicking, and on desktop by hovering

Despite encountering this question numerous times, I am still unable to find a solution. I have a dropdown menu and I want it to open on hover for desktop and on click for mobile devices. I attempted using the provided code, however, it only works after r ...

jquerycssmobileresizewindow

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

javascripthtmljquerycss

Guide to launching Vue CLI using Webpack on a live server

Just yesterday, I purchased a droplet from Digital Ocean in order to experiment with new concepts directly on a live server. My first venture was into Vue development. I meticulously followed the Vue CLI and Webpack installation guides, all without any hic ...

node.jsvue.js

Retrieving Vue data from parent components in a nested getter/setter context

<template> <div id="app"> {{ foo.bar }} <button @click="meaning++">click</button> <!--not reactive--> <button @click="foo.bar++">click2</button> </div> </templ ...

javascripttypescriptvue.jsvue-devtools

Error 400: Vue CLI and Laravel API not playing nice

I am currently working on developing an application utilizing Vue CLI and Laravel API. However, I have encountered an issue with receiving the token response from the Laravel API. Interestingly, when testing with Postman, everything functions properly Ne ...

phplaravelvue.js

Testing multiple scenarios with Vue Test Utils' mount function

For testing my Vue App, I am utilizing Vue Test Utils in conjunction with Jest. The following code snippet represents my dashboard component: <template> <div class="dashboard-v2"> <div class="component-container"> <compone ...

vue.jsvuejs2vue-test-utils

Tips for Avoiding Line Breaks in CSS Divs

I am currently designing a website menu with items such as Home, Contact us, and About us. Each item is styled with a background color and text size of 125X30. I initially used the float property in CSS to align them correctly in a single line from left ...

phphtmlcsslayout

Vuetify's Handy Helper Classes

Hey everyone, I'm working on a vuetify project and I need to convert inline styles to utility classes (if possible) font-size: 24px; font-weight :600 I checked the documentation and noticed that it only provides options for setting size and weight wi ...

javascripthtmlcssvue.jsvuetify.js

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

htmlcssangulartwitter-bootstrapsvg

How to Send an Ajax Request from a Vue.js Application to WordPress

I've designed a custom page template to seamlessly integrate a vue app into an existing website <?php /* * Template Name: Registration Form */ get_header(); ?> <div id="app"></div> <?php get_footer(); ?> After some ...

phpajaxwordpressvue.jsaxios

Separation between dropdown menu subcategories

I have searched through various discussions but haven't found a solution that addresses my specific issue, especially at a beginner level. I would really appreciate some guidance. The problem I'm facing involves my drop-down menu displaying gaps ...

htmlcssdrop-down-menu

Challenges arise with CSS alignment when adding d3.js charts to a webpage

I'm puzzled by the empty space that appears between the left column (highlighted in the image) and the header. This peculiar gap only seems to occur when the middle column is filled with a chart. I've scrutinized the code using Chrome Developer t ...

javascripthtmlcssd3.js

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

javascriptjqueryhtmlcssajax