如何使用ES6/Webpack导入Materialize.scss？

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

Say的模块解析 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.

我也注意到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-loader而不是文件加载器,不确定2个加载器之间的区别.

Answer 1

我相信你仍然需要一个单独的加载器来存储字体文件.

安装file-loader并将其添加到webpack.config.js:

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