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.
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'
Next.js supports CSS Modules using the
[name].module.cssfile 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'
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.
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
@zeit/next-css (it's also been deprecated).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>
...
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>
);
}
inside _app.js you can do the following:
if (someCondition){
import('../styles/rtl.css');
}
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>
</>
);
}
