如何在Angular Story Book中包含Fonts包和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

它被我解决为hack，导入loadGlobalStyles函数到storybook的配置：

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));
}