CODEWITHSUNDEEP
cssnext.js
Manwal
Manwal

Reputation: 23836

Next js HTML not loading in css

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>

Upvotes: 1

Views: 386

Answers (1)

Manwal
Manwal

Reputation: 23836

Solve this by following steps:

  1. Install html loader

npm install --save-dev html-loader

  1. 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

Upvotes: 1

Related Questions