Next.js 9导入第三方插件CSS [英] Next.js 9 import third party plugin css

问题描述

我想在我的一个组件中使用owl.carousel插件，但是我不想在_app.js中全局导入owl.carousel.css，因为该插件的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.

有没有办法使用CSS支持中内置的NEXT.JS 9将其仅导入到我的一个组件中?

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

推荐答案

在这种情况下，Next.js似乎没有内置的CSS支持.

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

您可以在组件中添加常规的<link>样式表.

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.

这篇关于Next.js 9导入第三方插件CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！