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

时间:2016-08-03 23:51:54

标签: ecmascript-6 webpack materialize

我有这个,但它失败了。

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

Say's模块解析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"] } ] } }

我的webpack.config.js

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.

修改

SVG无效

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.

我也注意到ttf并且woff2不能正常工作

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

我的装载机

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

我做得很好,这将有效

class Revenue < ActiveRecord::Base
  belongs_to :user

  def self.import(file)
  CSV.foreach(file.path, headers: true) do |row|
    Revenue.create! row.to_hash
   end 
  end

end

但它使用url-loader而不是文件加载器,不确定2个加载器之间的区别。

1 个答案:

答案 0 :(得分:5)

我相信你仍然需要一个单独的加载器来处理字体文件。

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

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