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

这是我的一个破解，将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));
}

Answer 2

关于用于加载Google字体的链接标签，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 6 +起，angular-cli.json已被替换），请确保您安装了@storybook/angular 5+版本，该版本提供了默认设置内部的webpack配置，将从angular.json配置中读取配置。请参阅官方示例：https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/package.json

我一直在Angular 8中使用上述功能，并且它们在5.3版本中可用

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

2 个答案: