Webpack Fehler beim Kompilieren sass

Question

Ich habe ein sass Komponente wie folgt:

@font-face { 
    font-family: 'icomoon'; 
    src: url('../fonts/icomoon.eot'); 
    src: url('../fonts/icomoon.eot') format('embedded-opentype'), 
    url('../fonts/icomoon.ttf') format('truetype'), 
    url('../fonts/icomoon.woff') format('woff'), 
    url('../fonts/icomoon.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
    /* use !important to prevent issues with browser extensions that change fonts */ 
    font-family: 'icomoon' !important; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 

    /* Better Font Rendering =========== */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-close2:before { 
    content: "\e66d"; 
} 
.icon-checkmark2:before { 
    content: "\ea11"; 
} 

und eine webpack Config wie folgt aus:

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'public/js/'); 
var APP_DIR = path.resolve(__dirname, 'jsx'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
     path: BUILD_DIR, 
     filename: 'app.js' 
    }, 
    module : { 
     loaders : [ 
      { 
       test : /\.jsx?/, 
       include : APP_DIR, 
       loader : 'babel' 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['style', 'css', 'sass'] 
      } 
     ] 
    } 
}; 

module.exports = config; 

sobald ich die sass Komponente hatte oben ich folgendes erhalten Fehler:

ERROR in ./public/fonts/icomoon.ttf Module parse failed: /Users/alessandro.santese/Desktop/Alessandro/AIA/projects/accenture-tshirtbuilder/tshirtbuilder/public/fonts/icomoon.ttf Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.

und viele andere wie dies für die anderen Schriftarten

Answer 1

Ihre Webpack-Konfiguration vermisst einen Loader für die ttf-Datei. Ich denke du solltest den URL Loader in deinem Fall verwenden. auf Ihren Loader hinzufügen

{ 
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, 
    loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' 
} 

Sie werden es installieren müssen: npm install url-loader --save-dev