如何在 Angular Story Book 中包含字体包和 CSS 框架？

Question

我们在 Angular 故事书中的哪里包含任何外部字体？我正在使用 materialize css 和一些谷歌字体。HTML :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">

CSS：在 angular-cli.json 我有这个

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

Answer 1

关于加载谷歌字体的链接标签，Custom Head Tags就是针对这种情况设计的：

preview-head.html在.storybook目录下添加一个文件（默认），你要插入的html标签在哪里：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

要加载angular.json文件中列出的样式（angular-cli.json自 Angular 6 + 以来已被替换），请确保您已经安装了@storybook/angular5+ 版本，该版本在内部提供了一个默认的 webpack 配置，可以从angular.json配置中读取配置。查看官方示例：https : //github.com/storybookjs/storybook/blob/next/examples/angular-cli/package.json

我一直在使用 Angular 8 的上述功能，它们在 5.3 版本上工作

Answer 2

我通过将函数导入loadGlobalStyles到故事书的配置中解决了这个问题：

const links = [
  {
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
  },
  {
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css?family=Montserrat:400',
  },
];

// to prevent duplication with HMR
function isLinkExist(option) {
  return !!document.querySelector(`link[href='${option.href}']`);
}

function insertLink(options) {
  const link = document.createElement('link');
  Object.assign(link, options);

  document.head.insertBefore(link, document.head.firstElementChild);
}

export function loadGlobalStyles() {
  links.forEach(link => isLinkExist(link) ? null : insertLink(link));
}