Как импортировать Materialize.scss с ES6/Webpack?

Question

У меня есть это, но он терпит неудачу.

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> 
    ) 
    } 
} 

Модуля Сей разбора failed \fonts\roboto\roboto-bold.woff2 unexpected character ' ' (1:4)

моего 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"] 
     } 
    ] 
    } 
} 

Редактировать

SVG не работает

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. 

и я просто не ticed TTF и woff2 не работает, а

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. 

Мой погрузчик

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

я прекрасно это будет работать

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

но использует URL-загрузчик не файл-загрузчик не что разница между двумя загрузчиками.

Answer 1

Я считаю, что вам по-прежнему нужен отдельный загрузчик для файлов шрифтов.

Установите file-loader и добавить к вашему webpack.config.js:

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