Next.js 9 import third party plugin css

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/60914828/next-js-9-import-third-party-plugin-css