How to import external css file in nextjs app

reactjs nextjs webpack-loader css-import
Mira Thakkar picture Mira Thakkar · Nov 24, 2017 · Viewed 13.7k times · Source

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.

Answer

Petros Kyriakou picture Petros Kyriakou · Nov 15, 2018

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

Related questions

React - componentWillReceiveProps alternative

I use React with NextJS. I have a component which is basically a table which gives some summary. Based on some UI selection, this component is expected to show appropriate summary. The below code works perfectly fine. class Summary extends …

Read More
Nextjs: Unable to load images from static folder

How can I load images in a component in Next.js? Do I have to build the project first? If yes, is there a way to load the images without building first? I cannot get this to work, no matter …

Read More
Conditional redirection in Next.js

Is it possible to conditionally redirect a user to another Url based on cookie value? I know I can inspect cookie on a server & then redirect. But what should I do if a user came through Link. (I can't …

Read More