Wie importiere ich Materialise.scss mit ES6/Webpack?

Question

Ich habe das aber es scheitert.

import React from 'react'; 
import '../../node_modules/materialize-css/sass/materialize.scss'; 

export default class App extends React.Component { 
    render() { 
    return (
     <div class="card-panel teal lighten-2"> 
     <h1> fad </h1> 
     </div> 
    ) 
    } 
} 

Say Moduls failed \fonts\roboto\roboto-bold.woff2 unexpected character ' ' (1:4)

mein webpack.config.js

module.exports = { 
    devtool: 'inline-source-map', 
    entry: "./app/index.js", 
    output: { 
    path: __dirname + '/dist', 
    filename: "bundle.js" 
    }, 
    devServer: { 
    contentBase: "./app", 
    inline: true, 
    port: 3333 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loader: "style!css" 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.scss/, 
     loaders: ["style", "css", "sass"] 
     } 
    ] 
    } 
} 

bearbeiten

SVG nicht funktioniert

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3 
Module parse failed:node_modules\font-awesome\fonts\fonta 
esome-webfont.svg?v=4.6.3 Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 

auch ich gerade nicht analysieren ticed ttf und woff2 sowie

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3 
Module parse failed:node_modules\font-awesome\fonts\fontaw 
esome-webfont.woff2?v=4.6.3 Unexpected character ' ' (1:4) 
You may need an appropriate loader to handle this file type. 

Mein Loader

{ 
     test: /\.(eot|ttf|woff2?|otf|svg)$/, 
    loaders: ['file'] 
     } 

ich fein dies funktionieren wird

{ 
     test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, 
     loader: 'url-loader' 
     } 

aber es wird mit url-loader loader datei nicht nicht tat nicht funktioniert sicher, was der Unterschied zwischen den 2 Lader ist.

Answer 1

Ich glaube, dass Sie noch einen separaten Loader für die Schriftart-Dateien benötigen.

file-loader installieren und fügen Sie diese zu Ihrer webpack.config.js:

{ 
    test: /\.(eot|ttf|woff2?|otf)$/, 
    loaders: ['file'] 
}