我试图从本地资源中导入字体到我的React项目中,该项目使用Webpack和Styled Components。我有一个包含以下代码的字体文件夹:
在我的应用程序组件中,我使用styled-components的ThemeProvider,如下所示(为简洁起见,这里省略了一些非相关代码):
import { css } from 'styled-components';
import { fontWeight } from './vars';
export const fontFaces = css`
@font-face {
font-family: 'OurFont';
src: url('/resources/fonts/OurFont-Bold.woff2') format('woff2');
font-weight: ${fontWeight.bold};
font-style: normal;
}
`;
然后我有一个全局样式文件:
import { createGlobalStyle } from 'styled-components';
import { fontFaces } from './fonts';
export const GlobalStyles = createGlobalStyle`
${fontFaces}
`;
在我的应用程序组件中,我使用styled-components的ThemeProvider,如下所示(为简洁起见,这里省略了一些非相关代码):
import { ThemeProvider } from 'styled-components';
class App extends React.Component {
render() {
return (
<ThemeProvider theme={{ theme }}>
<GlobalStyles />
<AppHeader />
<AppNavigator />
</ThemeProvider>
);
}}
以下是webpack相关的代码:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
limit: 10000,
mimetype: 'application/font-woff',
},
},
],
},
我试着按照这个帖子的建议来操作,但是似乎不起作用,因为在控制台中出现了一个错误,显示GET http://localhost:5001/resources/fonts/OurFont-Bold.woff2 net::ERR_ABORTED 404(未找到)。
有人知道我做错了什么或者是否还有其他方法吗?谢谢!