How to import external css file in nextjs app

Asked 24/11, 2017 at 12:48 Answered 1/10, 2023 at 19:50

Solved reactjs next.js webpack-loader css-import

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.

Audly answered 24/11, 2017 at 12:48 Comment(0)

For Global CSS

To add global css, inside the file pages/_app.js use import '../styles.css' or to import from node_modules, use something similar to import 'bootstrap/dist/css/bootstrap.css'

For Component Level CSS

Next.js supports CSS Modules using the [name].module.css file naming convention. CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

If you have a component called Button inside Button.js, create a file called Button.module.css for the css file. Then you can import it to the Button component by import styles from './Button.module.css'

Documentation

Old Answer

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.

Repugnance answered 17/12, 2017 at 13:33 Comment(3)

I have created the assets directory at root and its not working but somehow after checking this comment I renamed the directory to static and its working fine now. – Raseda 19/2, 2019 at 8:1

By far the simplest answer to this very simple question but difficult to fathom question. Thanks± – Sparkman 17/1, 2022 at 22:29

how about a css file hosted on a cdn somewhere. how do i include it? – Sholokhov 12/3, 2023 at 23:11

You first need to create a next.config.js file in root directory

Install next-css

npm i @zeit/next-css

in next.config.js

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Restart app

USAGE

import 'react-select/dist/react-select.css'

No need for dangerouslySetInnerHTML

Cai answered 15/11, 2018 at 9:26 Comment(2)

This is the proper solution, everything else is a hack. – Footcloth 25/12, 2018 at 20:53

Note that since version 9.2 Next.js has built-in support for CSS. You should no longer use @zeit/next-css (it's also been deprecated). – Cracking 16/10, 2022 at 12:16

you can simply move your css file into public folder /public/{name}.css like this

and import css file inside src/pages/_document.js file

import { Html, Head, Main, NextScript } from 'next/document'

...
<Head>
   <link href="/{name}.css" rel="stylesheet" />
</Head>
...

Soissons answered 28/2, 2023 at 19:45 Comment(0)

import your external css file into the component. For example, react-select requires you to add their stylesheet in order to make its styles work. You can import their stylesheets using
```
import rsStyles from 'react-select/dist/react-select.css'
```

Inject style in your component using dangerouslySetInnerHTML at render method

render() {
  return (
    <div>
      <style dangerouslySetInnerHTML={{ __html: rsStyles }} />
      // rest of your component code 
      // where you can use the injected styles
    </div>
  );
}

Chadd answered 4/12, 2017 at 7:6 Comment(0)

inside _app.js you can do the following:

if (someCondition){
import('../styles/rtl.css');
}

Mcdevitt answered 14/10, 2022 at 23:28 Comment(1)

does this code run on the client and/or on the server? if server, does it run for every request? – Waitabit 1/12, 2022 at 15:53

in your _app.js file

put all your js scripts in the tag in return block like this



export default function App(props) {

  return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="https://unpkg.com/[email protected]/dist/quill.snow.css"
        />
        <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript" src="/js/Font-Awesome.js"></script>
        <script type="text/javascript" src="/js/select2.min.js"></script>
        <script type="text/javascript" src="/js/slick.min.js"></script>
      </Head>
      <AuthProvider>
      </AuthProvider>
    </>
  );
}

Mantic answered 1/10, 2023 at 19:50 Comment(0)

For Global CSS

For Component Level CSS

Old Answer

Recommended topics

Hot tags