如何在Storybook的MDX文档中导入外部CSS文件？

一、排查"Nunito Sans"字体来源 #

• Storybook默认样式：@storybook/addon-docs组件库自带基础全局样式，其中包含Nunito Sans字体定义，这是最可能的来源。
• 项目全局样式：检查项目根目录的全局CSS文件（如global.css、index.css），或是.storybook/preview.js、.storybook/main.js等Storybook配置文件，确认是否导入了第三方样式包或字体规则。
• 浏览器工具定位：打开浏览器开发者工具，选中页面文字元素，切换到「Computed」面板查看font-family属性，点击字体规则旁的溯源箭头，可直接查看样式来源的CSS文件及代码行。

二、导入外部字体CSS文件的方法 #

1. MDX文件内单独导入 #

在MDX顶部直接引入外部CSS文件：

import '../styles/your-font-rules.css';
import { Meta } from "@storybook/addon-docs"

// 后续MDX内容...

2. Storybook全局统一导入 #

若希望所有MDX文档共用这套字体规则，在.storybook/preview.js中添加导入：

import '../styles/your-font-rules.css';

export const parameters = {
  // 其他Storybook配置
};

3. 强制覆盖默认字体 #

需要优先使用自定义字体时，可在内联<style>中明确指定font-family，必要时添加!important强制覆盖：

* {
  font: inherit;
  font-family: '你的自定义字体', sans-serif !important;
}

内容的提问来源于stack exchange，提问作者juzello