字体不能与汇总配置一起使用-组件库

问题描述

我有用React编写的自定义组件库（要构建的汇总）。我不想在外部项目中使用createglobalstyle BCS破坏性能。我添加了带有字体面（相对路径）的CSS文件，但是这些字体在外部项目中不起作用。你知道如何解决吗？ src

• 组件（文件夹）

• index.css与

  @ font-face { font-family：'font1'; 字体显示 字体粗细：900； src：url（assets / fonts / font1 / heavy / heavy.woff2） } h1 { 边距：2.75rem 0 1.05rem; font-family：'font1'; 字体粗细：400； 行高：1.15； 红色; }

Rollupconfig插件：

[    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无法正常工作：（

解决方法

我觉得您只是错误输入了字体的来源。

尝试这样的事情：

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

}