font-face 不适用于汇总配置 - 组件库

Posted

技术标签:

【中文标题】font-face 不适用于汇总配置 - 组件库【英文标题】:font-face are not working with rollup config - component library 【发布时间】:2020-12-01 01:34:04 【问题描述】:

我有用 React 编写的自定义组件库(汇总构建)。我不想在外部项目中使用 createglobalstyle BCS 它的糟糕表现。我添加了带有字体面(相对路径)的 CSS 文件,但这些字体在外部项目中不起作用。你知道如何解决吗? 源代码

组件(文件夹)

index.css 与

@font-face 字体系列:'font1'; 字体显示:交换; 字体粗细:900; src: url(assets/fonts/font1/heavy/heavy.woff2) h1 保证金:2.75rem 0 1.05rem; 字体系列:'font1'; 字体粗细:400; 行高:1.15; 红色;

汇总配置插件:

[    postcss(
        extract: false,
        plugins: [autoprefixer]
    ),
    babel(
        exclude: 'node_modules/**'
    ),
    localResolve(),
    resolve(
        browser: true
    ),
    commonjs(),
    filesize(),
    copy(
        targets: [ src: 'src/assets', dest: 'build' ]
    ),
    url(
        // by default, rollup-plugin-url will not handle font files
        include: ['**/*.woff', '**/*.woff2'],
        // setting infinite limit will ensure that the files 
        // are always bundled with the code, not copied to /dist
        limit: Infinity
      ),
      modulepreload(
        prefix: 'fonts',
        index: 'src/assets/fonts/font1/heavy/heavy.woff2',
      )

]; 

当我在外部项目中使用该库时,我会看到所有样式,例如 color:red 等,但 font-face 不起作用:(

【问题讨论】:

你找到解决办法了吗? 【参考方案1】:

我感觉你只是错误地输入了字体的来源。

试试这样的:

@font-face  
font-family: 'font1';
font-display: swap;
font-weight: 900;
src: url("../assets/fonts/font1/heavy/heave.woff2");

【讨论】:

以上是关于font-face 不适用于汇总配置 - 组件库的主要内容,如果未能解决你的问题,请参考以下文章

@font-face 不适用于斜体/粗体字体

@font-face 不适用于特定版本的 Internet Explorer 11

Angular Material Tabs 不适用于包装器组件

Ajax 更新/渲染不适用于具有渲染属性的组件

有效的配置文件不适用于 git 存储库

吊索动态包括不适用于多个组件