如何在Angular Storybook中引入字体包与CSS框架？

刚好我之前在Angular Storybook里配置过类似的资源，给你分享两种靠谱的方法，都能搞定你的需求：

方法一：通过Storybook全局预览文件直接配置 #

Storybook的.storybook/preview.js（如果用TypeScript就是preview.ts）是全局配置入口，在这里可以统一加载所有故事需要的资源：

1. 打开（或新建）.storybook/preview.js文件
2. 添加以下代码：

   // 引入Materialize CSS和项目全局样式
   import '../node_modules/materialize-css/dist/css/materialize.css';
   import '../src/styles.css';
   
   // 动态创建字体链接并插入到页面头部
   const loadFont = (href, rel = 'stylesheet') => {
     const linkTag = document.createElement('link');
     linkTag.href = href;
     linkTag.rel = rel;
     document.head.appendChild(linkTag);
   };
   
   // 加载谷歌字体和Material Icons
   loadFont('https://fonts.googleapis.com/icon?family=Material+Icons');
   loadFont('https://fonts.googleapis.com/css?family=Montserrat:400');
   

这样所有的Story都会自动加载这些字体和CSS，和你原有项目的效果完全一致。

方法二：复用Angular项目的现有配置（更省心） #

如果你的Storybook是基于Angular CLI搭建的，它可以直接复用angular.json里的样式配置，避免重复代码：

1. 确保你的angular.json里的styles数组已经包含了所需的CSS（你现在的配置已经满足）：

   "styles": [
     "styles.css",
     "../node_modules/materialize-css/dist/css/materialize.css"
   ]
   

2. 在你的src/styles.css顶部添加字体的@import语句：

   @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
   @import url('https://fonts.googleapis.com/css?family=Montserrat:400');
   

Storybook会自动读取angular.json的配置加载styles.css，进而引入这些字体资源，完全复用你现有项目的配置逻辑。

小提示 #

两种方法选其一即可：如果想单独给Storybook做定制化配置，选方法一；如果希望和项目配置保持一致、减少重复，方法二更合适。

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