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

Question

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

有没有办法解决这个问题？

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。

Answer 2

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

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

您还应该在OtherComponent 中执行import 'keen-slider/keen-slider.min.css'。

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