Next.js 9 import third party plugin css

user_8556874 0
Viewed 863

I want to use owl.carousel plugin in one of my components but I do not want to import owl.carousel.css globally in _app.js because the plugin css file is large and I want to import it just in the component that will use it and not in all the pages.

Is there any way to import it just in one of my components using NEXT.JS 9 build in css support?

css-loader next.js
1 Answers

It seems Next.js doesn't have a built-in CSS support for this case.

You can add a regular <link> stylesheet in your component.

const Foo = () => (
  <div>
    <link 
      href="owl.carousel.css" 
      rel="stylesheet"
    />
  </div>
);

export default Foo;

The stylesheet won't be automatically minified as it doesn't go through build process, so use the minified version.

user_59640230
Related