Next js HTML not loading in css

Question

I am using Nextjs and loading flaticon css in _app.js like:

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

In following content I am getting error:

@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;
}

Following error I am getting:

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>

Remove ` url('../fonts/Flaticon.html#Flaticon') format('svg');` line and see if its working. If its working it could be due the nextjs loader issue. You need to set corresponding loader (html) in next.config.js — kiranvj
– kiranvj, Commented Jan 16, 2023 at 9:42
Yes it's working after removing url('../fonts/Flaticon.html#Flaticon') format('svg'); @kiranvj How do we set loader for this file? — Manwal
– Manwal, Commented Jan 16, 2023 at 9:44
I havent used it but try these links github.com/alexblunck/next-html , webpack.js.org/loaders/html-loader and dev.to/marcinwosinek/… — kiranvj
– kiranvj, Commented Jan 16, 2023 at 9:52
@kiranvj thanks your suggestion worked. Posted correct steps in answer. — Manwal
– Manwal, Commented Jan 17, 2023 at 10:10

Manwal · Accepted Answer · 2023-01-17 10:16:59Z

1

Solve this by following steps:

Install html loader

npm install --save-dev html-loader

Add this in next.config.js file

webpack: (config, options) => {
    config.module.rules.push({
      test: /\.html$/i,
      use: 'html-loader',
    });

    return config
  }

Reference: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

edited Jan 17, 2023 at 10:16

answered Jan 17, 2023 at 10:09

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kiranvj Over a year ago

Anyone doing this make sure to restart dev server to reflect changes in next.config.js

Collectives™ on Stack Overflow

Next js HTML not loading in css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related