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

How can I line up the bootstrap datepicker with a bootstrap column?

I currently have Bootstrap 3.3.7 and a bootstrap datepicker version 1.6.4 integrated into my project. However, I am facing an issue where the datepicker does not fill up the designated column within a div with the class col-md-6. Here is the HTML code sni ...

htmlcsstwitter-bootstrapdatepicker

Tips for updating the default directories for Storybook and its addons

Overview I am facing challenges running Storybook on a Next.js app within a restricted Windows environment. The node_modules/.cache/sb-manager seems to be causing issues by setting absolute Windows paths that are inaccessible in my environment, such as C: ...

reactjsnode.jsnext.jsstorybook

CSS hover effects are malfunctioning

Having an issue with hover in CSS. Attempting to create a menu bar using saved PNG files, each file within its own div. When applying a class name and hover modifier, it only works on the first element. As the pointer moves to subsequent elements, they are ...

htmlcss

The issue of drop shadows causing links to not work properly in Internet Explorer

I am currently working on a website design that features a fixed menu positioned behind the body. When the menu icon is clicked, some jQuery code shifts the body to the left. To create the effect of the fixed menu being positioned underneath, I have added ...

javascriptcssinternet-explorer

extracting an attribute from a class's search functionality

Let's consider the following HTML structure: <div id="container"> <div> <div class="main" data-id="thisID"> </div> </div> </div> If I want to retrieve the value inside the data-id attribute ...

javascriptjquerycss

Developing a user-friendly widget for a website that is not optimized for mobile devices

Here's the backstory: I'm currently in the process of creating a mobile-friendly widget for my clients. Unfortunately, they have web pages that are not optimized for mobile devices, and it doesn't seem like that will change anytime soon. Th ...

javascriptjqueryhtmlcssmobile

Leverage the power of Google Maps within your Next JS application

Has anyone encountered the error Unhandled Runtime Error Invariant Violation: useGoogleMap needs a GoogleMap available up in the tree when trying to use useGoogleMap() within a NEXT JS component? I am looking for a way to access the Google Map inside my ...

next.jsreact-hooksreact-google-maps-api

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users. I managed to make it f ...

javascriptcssreactjs

Tips for creating a flexible popover widget

I am facing an issue with my project that has a popover (ng-bootstrap) similar to what I need. The problem is that the tooltips and popovers are not flexible when it comes to resizing the page. To address this, I attempted to put a mat-grid (which works pe ...

htmlcssangular

Issue with NextJS: The .env.local file is not properly configured, resulting in

I have set up environment variables in my application using a .env.local file and trying to access them through process.env.ENV_KEY within a component. However, I am facing an issue where it is not returning the actual value but instead showing undefined. ...

reactjsenvironment-variablesnext.js

Using JQuery to Customize Navigation Menu Targeting

On my website, I am trying to make an href button and a menu fade in as the page loads. However, I am struggling to find the correct code due to its placement within multiple tags, especially since I am new to JS and JQuery. I have provided a fiddle with a ...

javascriptjqueryhtmlcss

Animating the exit transition in NextJS 14 with Framer Motion

I am currently working on implementing page transition animations for a Next.js 14 application using Framer Motion. I have created PageTransitionLayout.tsx with the following code: 'use client'; import { motion, AnimatePresence } from "fram ...

next.jsframer-motion

Implementing gridlines on a webpage using HTML and JavaScript to mimic the grid layout found in Visual Studios

Currently, I have a grid snap function in place, however, I am looking to add light grey lines horizontally and vertically on my Designing application. The goal is to achieve a similar aesthetic to Visual Studios' form designing feature. Utilizing so ...

javascripthtmlcssformsgridlines

Incorporate additional attributes into a Mongoose schema within a Next JS 13 project

During the development of my next js app with mongodb, I encountered a small issue. Despite modifying the Schema, the models remain unchanged and do not reflect the new properties I added. Why is this happening? I created a mongoose model. import { Schem ...

mongodbobjectmongoosenext.jsmodel

Tips for making your inner content as wide as possible

I'm currently working on developing collapsible tables, where an outer and inner table are displayed for every row that is clicked. This is the code I have implemented: HTML: <table class="table outerTbl mb-0"> <thead> <t ...

htmlcssbootstrap-4

Having trouble with setting the margin-top of a div?

When I attempted to apply the margin-top property to a div's style, it didn't have any effect. https://i.stack.imgur.com/jyY2G.png Below is the code snippet: .side { margin-left: 65%; margin-top: 3%; margin-right: 3%; border: 1px sol ...

htmlcssmargin

When using next-auth with the Google provider and Firebase, a user is not automatically created in the authentication system

After setting up next-auth with Firebase in api/auth/[...nextauth].js, the configuration looks like this: import {FirestoreAdapter} from "@auth/firebase-adapter" import {cert} from "firebase-admin/app" import NextAuth from "next-au ...

firebasenext.jsnext-auth

Adding a third-party script after closing the body tag on specific pages in NextJS can be achieved by using dynamic imports and

In my NextJS application, a third-party script is currently being loaded on all pages when it's only needed on specific pages. This has led to some issues that need to be addressed. The script is added after the closing body tag using a custom _docum ...

javascriptreactjsnext.js

Updating the status to PUBLISHED upon adding a comment via GRAPHQL stage

I have developed a small blog website using Nextjs, GraphQL, and GraphCMS. Currently, the create comment feature is functional, but I need to manually set the status to PUBLISHED in the CMS after creating a comment. I want the comment to automatically be s ...

graphqlnext.jsgraphql-js

My CSS content seems to be fitting correctly, but it appears larger than anticipated. Where have I gone

I've been working on customizing my webpage for mobile phones, but I've encountered an issue. When I use the inspect tool in Chrome to make the "screen" smaller, the webpage itself appears smaller but the body element size remains unchanged, as i ...

htmlcss