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 不适用于特定版本的 Internet Explorer 11