编译 sass 时出现 Webpack 错误答案

【问题标题】：Webpack error when compiling sass编译 sass 时出现 Webpack 错误
【发布时间】：2017-01-16 10:53:52
【问题描述】：

我有一个像这样的 sass 组件：

@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";
}

和这样的 webpack 配置：

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;

只要我有上面的 sass 组件，我就会收到以下错误：

./public/fonts/icomoon.ttf 中的错误模块解析失败： /Users/alessandro.santese/Desktop/Alessandro/AIA/projects/accenture-tshirtbuilder/tshirtbuilder/public/fonts/icomoon.ttf 意外字符 '' (1:0) 您可能需要适当的加载程序来处理这种文件类型。

其他字体也有很多类似的

【问题讨论】：

标签： reactjs sass webpack

【解决方案1】：

您的 webpack 配置缺少 ttf 文件的加载器。我认为您应该在您的情况下使用 url 加载器。添加到你的加载器

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

您需要安装它：npm install url-loader --save-dev

【讨论】：