반응 기반의 nextjs 앱을 만들고 있습니다. 일부 npm 패키지는 외부 CSS 가져 오기를 사용하고 있습니다. 어떻게 내 nextjs 응용 프로그램에서 외부 패키지의 CSS를 가져 오기를 지원할 수nextjs 앱에서 외부 CSS 파일을 가져 오는 방법
Module parse failed, you may need an appropriate loader to handle this file type.
같은 오류를 얻고있다. next.config.js에서 변경을하면 어딘가에서 확인한 것입니다. 그러나 나는 적절한 것을 발견 할 수 없습니다. 누군가이 일을 도와 줄 수 있다면 좋을 것입니다.
외부 CSS 파일을 구성 요소로 가져옵니다. 예를 들어 react-select의 경우 스타일을 적용하려면 스타일 시트를 추가해야합니다. 당신은 당신은 nextjs의 머리에 CSS 파일을 추가 할 수 있습니다 render 방법
render() {
return (
<div>
<style dangerouslySetInnerHTML={{ __html: rsStyles }} />
// rest of your component code
// where you can use the injected styles
</div>
);
}
에서 dangerouslySetInnerHTML를 사용하여 구성 요소에
import rsStyles from 'react-select/dist/react-select.css'
를 주입 스타일을 사용하여 스타일 시트를 가져올 수 있습니다.
import Head from 'next/head'
그리고 render 메소드에서 return 내부에 일반 HTML과 유사한 head 태그를 추가합니다. head 태그는 div 안에 있어야합니다.
<div>
<Head>
<title>Test</title>
<link href="/static/master.css" rel="stylesheet" key="test"/>
</Head>
</div>
또한 CSS는 정적 폴더에 있어야합니다. 여러 페이지에서 CSS를 다시 사용하려면 링크 태그에 키를 추가하십시오. 키가 페이지에서 동일하면 다음 서버가 css를 다시로드하지 않고 대신 css 파일을 다시 사용합니다.
이렇게하면 CSS 패키지가 필요하지 않습니다.