Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to import external css file in nextjs app

I am working on react based nextjs app. Some npm packages are using external css import. I am getting error like

Module parse failed, you may need an appropriate loader to handle this file type.

How can I support css import from external packages in my nextjs app. I have checked somewhere by making change in next.config.js, it works. But I am unable to find the proper one.It would be great if someone can help me around this.

like image 384
Mira Thakkar Avatar asked Nov 24 '17 12:11

Mira Thakkar


1 Answers

You can add the css file in head of nextjs.

import Head from 'next/head'

and in the render method, inside the return add a head tag similar to ordinary HTML, the head tag should be inside a div.

<div>
    <Head>
      <title>Test</title>
      <link href="/static/master.css" rel="stylesheet" key="test"/>
    </Head>
</div>

also the css should be in static folder. Add a key to the link tag to reuse the css in multiple pages. If the key is same across pages, then the next server won't reload the css, but instead will reuse the css file.

This way there is no need for any css packages either.

like image 156
illiteratewriter Avatar answered Sep 29 '22 08:09

illiteratewriter