Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams
@font-face {
  font-family: 'bikeshop';
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833');
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833#iefix') format('embedded-opentype'),
       url('/src/styles/bikeFont/font/bikeshop.woff2?37006833') format('woff2'),
       url('/src/styles/bikeFont/font/bikeshop.woff?37006833') format('woff'),
       url('/src/styles/bikeFont/font/bikeshop.ttf?37006833') format('truetype'),
       url('/src/styles/bikeFont/font/bikeshop.svg?37006833#bikeshop') format('svg');
  font-weight: normal;
  font-style: normal;

compiling via "npm run server" works fine, but the fonticons aren't shown on the website

the console logs these errors:

GET "domain"/src/styles/bikeFont/font/bikeshop.woff2?37006833   
File: shared_styles_host.js:90   
GET "domain"/src/styles/bikeFont/font/bikeshop.woff?37006833  
File: src/styles/bikeFont/font/bikeshop.woff?37006833:1 
GET "domain"/src/styles/bikeFont/font/bikeshop.ttf?37006833  
File: src/styles/bikeFont/font/bikeshop.ttf?37006833:1

do i need to include a new loader for this in my webpack.common.js?

Edit:

i load the @font-face in my scss-file and use this webpack rule for it

test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader

Use simon04's answer if you want webpack to process your fonts and images in your css.

If you just want to use webpack for you css and ignore all url paths in your css (you will handle serving the referenced assets yourself) you could set the url option to false on the css-loader:

test: /\.css$/, use: { loader: 'css-loader', options: { url: false }

See https://github.com/webpack/css-loader#options-1

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.