admin 管理员组

文章数量: 1086019

I am trying to build a node.js web-app with Webpack on the front end but I have a problem with the fonts when using multiple scss files. In my webpack.config.js file, in the module object I have among others the following rule:

{
   test: /\.(woff|woff2|eot|ttf|otf)$/i,
   type: 'asset/resource'
}

When I include the following in my main.scss file:

@font-face {
  src: url('../assets/FuturaCyrillicExtraBold.ttf');
  font-family: 'FuturaCyrillicExtraBold';
}

everything works fine, fonts can be found.

When I try code-splitting with multiple scss files and forward them consecutively fonts cannot be found! It says:

Module not found: Error: Can't resolve '../../assets/FuturaCyrillicExtraBold.ttf' in...

In contrast images in the same folder can be located and loaded in styles perfectly with the same scss arrangement of files. Do you have any ideas?

src
├── app
│   ├── generateJoke.js
│   ├── index.js
│   └── template.html
├── assets
│   ├── AttenRoundNewExtraBoldItalic.otf
│   ├── FuturaCyrillicExtraBold.ttf
│   └── laughing.svg
└── styles
    ├── globals
    │   ├── _colors.scss
    │   ├── _index.scss
    │   └── _typography.scss
    ├── main.scss
    └── utils
        └── _index.scss

I am inside _typography.scss and trying to reference the font inside the assets folder.

I am trying to build a node.js web-app with Webpack on the front end but I have a problem with the fonts when using multiple scss files. In my webpack.config.js file, in the module object I have among others the following rule:

{
   test: /\.(woff|woff2|eot|ttf|otf)$/i,
   type: 'asset/resource'
}

When I include the following in my main.scss file:

@font-face {
  src: url('../assets/FuturaCyrillicExtraBold.ttf');
  font-family: 'FuturaCyrillicExtraBold';
}

everything works fine, fonts can be found.

When I try code-splitting with multiple scss files and forward them consecutively fonts cannot be found! It says:

Module not found: Error: Can't resolve '../../assets/FuturaCyrillicExtraBold.ttf' in...

In contrast images in the same folder can be located and loaded in styles perfectly with the same scss arrangement of files. Do you have any ideas?

src
├── app
│   ├── generateJoke.js
│   ├── index.js
│   └── template.html
├── assets
│   ├── AttenRoundNewExtraBoldItalic.otf
│   ├── FuturaCyrillicExtraBold.ttf
│   └── laughing.svg
└── styles
    ├── globals
    │   ├── _colors.scss
    │   ├── _index.scss
    │   └── _typography.scss
    ├── main.scss
    └── utils
        └── _index.scss

I am inside _typography.scss and trying to reference the font inside the assets folder.

  • css
  • webpack
Share Improve this question edited Mar 27 at 17:00 Emmanuel asked Mar 27 at 12:56 EmmanuelEmmanuel 251 silver badge4 bronze badges 3
  • Your main.scss code had only one ../, the error message appears to show two. Did your code-splitting involve putting parts of this into additional subfolders? – C3roe Commented Mar 27 at 13:06
  • Yes, I created folders for the sccs files. – Emmanuel Commented Mar 27 at 13:14
  • And what did you put where now, exactly? The file containing src: url('../assets/FuturaCyrillicExtraBold.ttf'), is that at a different folder level now, than where this was before? – C3roe Commented Mar 27 at 13:32
Add a comment  | 

1 Answer 1

Reset to default 0

Based on an answer that was given here, with the above file structure, it turns out the correct way to reference the font (from inside _typography.scss) is the following:

@font-face {
  src: url('~../assets/FuturaCyrillicExtraBold.ttf');
  font-family: 'FuturaCyrillicExtraBold';
}

本文标签： cssWhy webpack cannot locate fontsStack Overflow

版权声明：本文标题：css - Why webpack cannot locate fonts? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744087729a2531449.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。