如何从全局 scope 中删除 CSS 并仅导入到 React、Gatsby 中的特定页面

Question

目前，我正在尝试实现一个敏锐的滑块库（ https://www.npmjs.com/package/keen-slider ）。 对于安装，我们需要添加import 'keen-slider/keen-slider.min.css' 。 在这种情况下，如您所知，敏锐的 slider CSS 被添加到全局。 CSS 全局包含在页面标记中。 从我的角度来看，它应该只包含在使用 slider 的页面上

有什么办法可以解决这个问题吗？

Answer 1

我不确定是否理解这个问题。 您始终可以选择全局或在特定文件中导入文件（CSS 或您想要的任何格式）。

对于您的用例，一旦安装了依赖项（ npm install keen-slider --save ），您就可以将缩小的 CSS 导入所需的组件。 例如：

import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react'

export function IndexPage(){
  const [sliderRef, slider] = useKeenSlider()

return <section className="slider-wrapper">
         <div ref={sliderRef}>
           <div class="keen-slider__slide">1</div>
           <div class="keen-slider__slide">2</div>
           <div class="keen-slider__slide">3</div>
         </div>
       </section>
}

使用这种方法，您将只在 IndexPage 中导入keen-slider.min.css IndexPage

Answer 2

我认为，您可以尝试通过以下方式延迟加载组件：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

此外，您应该在 OtherComponent 中import 'keen-slider/keen-slider.min.css' OtherComponent

更多信息： https://reactjs.org/docs/code-splitting.html