Question

我正在使用NPM中的font-awesome并尝试将其与webpack一起使用。但是，我收到一个错误，无法找到字体。字体位于~/Projects/GrailLuck/node_modules/font-awesome/fonts。

下

我在我的sass文件中导入font-awesome，如下所示：

@import "~font-awesome/css/font-awesome";

我的装载者：

loaders: [
{
    test: /\.js$/,
    exclude: /node_modules|app.js/,
    loader: "babel-loader",
    query: {
      presets: ['es2015']
    }
},
{
    test: /\.scss$/,
    exclude: /node_modules/,
    include: [ path.resolve(__dirname, "src", "sass") ],
    loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib')
},
{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/font-woff"
},
{
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/font-woff"
},
{
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    loader: "file"
},
{
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=image/svg+xml"
}]

这是我得到的错误：

ERROR in ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compas
s-mixins/lib!./src/sass/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.svg in /home/spo
ck/Projects/GrailLuck/web/src/sass
 @ ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compass-mixi
ns/lib!./src/sass/app.scss 6:10469-10520

有多个错误与上述相同。每个字体类型一个。

任何想法如何使这个工作？

Answer 1

我发现有一个名为font-awesome-sass-loader的包。完美运行，并不像网络上的其他解决方案那样感觉像黑客一样。

Webpack：导入font-awesome失败，因为它无法找到字体

1 个答案: