CSS not being applied to Next.js HTML pages

Currently, I am utilizing Nextjs and including the flaticon css in _app.js as follows:

import '../public/assets/css/flaticon.css';

In the upcoming section, an error is being encountered:

@font-face {
  font-family: 'Flaticon';
  src: url('../fonts/Flaticon.eot');
  src: url('../fonts/Flaticond41d.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Flaticon.woff') format('woff'),
    url('../fonts/Flaticon.ttf') format('truetype'),
    url('../fonts/Flaticon.html#Flaticon') format('svg');
  font-weight: normal;
  font-style: normal;
}

The error message received is:

error - ./public/assets/css/Flaticon.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html>
| <html lang="en-US" prefix="og: http://ogp.me/ns#">
|   <head>
cssnext.js

Answer №1

To solve this issue, follow these steps:

  1. Begin by installing the html loader

npm install --save-dev html-loader

  1. Next, add the following code to your next.config.js file
webpack: (config, options) => {
    config.module.rules.push({
      test: /\.html$/i,
      use: 'html-loader',
    });

    return config
  }

For more information, refer to https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

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

Having difficulty viewing the images clearly

My JavaScript codes for scrolling images are not displaying all the images when viewed on Google Chrome. Is there a solution available? Below is the included JS code and CSS. data=[ [" images/img1.jpg"," Image1","pic01.jpg"], [" images/img2.jpg","Image2 " ...

javascriptcss

Scale first, then drag and drop to fix a faulty registration

I'm currently working on a project that involves dragging and dropping the correct items onto a technical drawing, such as a motherboard. The user is presented with pictures of components like CPUs or DDR memory and must drag these items to their corr ...

jquerycssdrag-and-dropresponsive-designjquery-ui-draggable

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

javascriptcssreactjstailwind-css

Organizing pictures by category

I am currently working on creating an interactive image gallery with sorting options based on different categories such as land, sea, animals, and more. I have created a small example to demonstrate my concept. My objective: is to allow users to select a ...

javascripthtmljquerycsssorting

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

jqueryhtmlcsstwitter-bootstrap

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Tips on verifying if user x has sent over two messages in the chat and concealing their identity

I have a JavaScript chat application that is causing me some trouble. I recently implemented a feature to display user names on top of messages, and while it works well for the first message, I am struggling to hide the user's name when they send subs ...

javascripthtmlcss

The font size appears significantly smaller than expected when using wkhtmltoimage to render

I am trying to convert text into an image, with a static layout and size while adjusting the font size based on the amount of text. I prefer using wkhtmltoimage 0.12.5 as it offers various CSS styling options. Currently, I am working on a Mac. Below is a ...

javascripthtmlcsswkhtmltopdfwkhtmltoimage

What is the best way to create rounded thumbnails with the paperclip gem?

I noticed that the latest version of Basecamp is implementing this feature, you can check it out in this link. I am curious about how to replicate this in my Rails 3 application. ...

cssruby-on-rails-3paperclipthumbnails

Launching the webpage with Next.js version 13

Hey there! I'm currently working on implementing a loading screen for my website to enhance the user experience. Since it's quite a large site, I believe a loading screen would be beneficial. However, I'm having trouble getting it to work on ...

javascriptreactjsnext.jsstateloading

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

htmlcss

Create a pair of blocks that are identical in size and positioned next to each other

I am encountering difficulties with a seemingly simple task. Here is what I want to achieve: https://i.stack.imgur.com/z7ITk.png My goal is to have two red blocks of equal height, even if the content inside them varies in height. Using a table is not idea ...

htmlcssheightresponsive

The Boostrap Datepicker fails to display

I'm having trouble integrating a Bootstrap Datepicker into my form. I got it working outside of the form, but when I try to include the code in my form, it doesn't seem to work. All necessary files are present and the code is identical. <!D ...

jqueryhtmlcssbootstrap-4bootstrap-datepicker

What is the impact of using overflow: hidden on block elements?

HTML <div class="top"><p>hello</p></div> <div class="bottom"><p>hello</p></div> CSS .bottom { overflow: hidden; } While delving into the world of CSS, I encountered an interesting qu ...

htmlcss

Partially filling circles for a personalized coin-slider experience

Looking to create a unique coin-slider that changes the filled factor of a coin as it moves through a specific range of images. For example, when scrolling through 10 images, the filled part of the coin would transition from 0 to 1 depending on which image ...

csshtmlcanvas

The image is being loaded onto the canvas and is being resized

Currently, I am facing an issue with loading images into a canvas element as the image seems to be scaled in some way. To provide some context, I have multiple canvases on my webpage and I want to load images into them. Since the dimensions of the canvas ...

javascriptcsscanvasdrawimage

Is using CSS as an HTML attribute considered poor practice?

I've been noticing an increasing trend of combining HTML, CSS, and JavaScript together in web development. However, I was taught to keep them separate with HTML linking to the sources/scripts. While using the style attribute in HTML is sometimes acce ...

htmlcss

Personalizing Bootstrap 5 button designs and attributes for a customized look

In my project, I've set up my custom.scss file with the following code: $primary: #e84c22; $theme-colors: ( primary: $primary, ); @import "~bootstrap/scss/bootstrap.scss"; Currently, the color looks like this: https://i.sstatic.net/lbL ...

htmlcsstwitter-bootstrapsassbootstrap-5

Tips on how to stop label text from wrapping onto a new line and only show one line

Working with asp.net mvc, I am encountering an issue where the label text is displaying on two lines instead of one. The expected behavior is for it to appear on a single line. I need the label text to display without wrapping to a new line. For example, ...

htmljquerycssasp.net-mvcasp.net-mvc-4

Stop an animation while it is in the hover state

Currently experimenting with CSS3 Animations to create a Panoramic view using only CSS and no JavaScript. I have managed to create a somewhat working demo: http://www.example.com/images/panoramic/ The concept is simple: when the user hovers over the blac ...

animationcss