4

我们在 Angular 故事书中在哪里包含任何外部字体？我正在使用物化 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"
  ]
4

2 回答 2

8

关于加载谷歌字体的链接标签，自定义头部标签是针对这种情况设计的：

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/angular版本 5+，它在内部提供了默认的 webpack 配置，可以从配置中读取angular.json配置。见官方示例：https ://github.com/storybookjs/storybook/blob/next/examples/angular-cli/package.json

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

于 2019-11-04T12:07:36.003 回答
0

它被我作为一个黑客解决了，将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));
}
于 2018-09-02T09:57:32.913 回答