Не удается загрузить CSS-шрифт (SVG, СРВ, Woff, woff2 и TTF) с WebPack

Question

Я хочу, чтобы включить этот шрифт в моем проекте:

@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; 
} 

компиляцией через «сервер запустить НПМ» работает отлично, но fonticons не показана на сайте

консоли записывает эти ошибки:

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 

мне нужно сделать, чтобы включить новый загрузчик для этого в моем webpack.common.js?

Edit:

я загрузить @ шрифта лицо в моем SCSS-файл и использовать это правило WebPack для него

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

Answer 1

Используйте css-loader вместе с file-loader или url-loader. Например:

{ 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     loader: 'css-loader' 
    }, { 
     test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, 
     loader: 'url-loader', 
     options: { 
     limit: 10000 
     } 
    }] 
    } 
} 

Answer 2

Использование simon04's answer если вы хотите WebPack обрабатывать ваши шрифты и изображения в вашем CSS.

Если вы просто хотите использовать Webpack для вас CSS и игнорировать все пути URL-адреса в вашем CSS (вы будете обрабатывать обслуживая ссылки активы сами) вы можете установить опцию url в false на css-loader:

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

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