如何引入全局样式

通过 CLI 初始化的卡片前端工程中，默认集成了对 CSS Module 的支持。它会为卡片样式生成作用域，但仍需考虑全局样式的引入，因为可能会影响专题的全局样式。

以 Swiper 为例，我们希望引入 Swiper 的样式，并将其限制在当前卡片的样式作用域内。

不推荐（❌）

对于常规的 CRA 项目，通常会在根文件（main.tsx / app.tsx）主动引入。然而，这样的引入方式会将 Swiper 的样式构建在全局样式中。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd';
import App from './App.tsx';

import './styles/base.css';

// 不推荐的 Swiper 引入方式
import 'swiper/css';

推荐（✅）

在 SCSS 文件中引入全局样式，并将其限制在卡片最外层。

.cardWrapper {
  position: relative;
  margin: 0 10px 10px;

  :global {
    @import 'swiper/css';
  }
}

通过这种方式，我们确保 Swiper 的样式仅对当前卡片产生影响，而不会波及到全局样式。