webpack 使用字体答案

【问题标题】：webpack working with fontwebpack 使用字体
【发布时间】：2017-04-21 14:33:28
【问题描述】：

我正在尝试将 webpack2 与 express 一起使用，但我似乎无法提供我的字体，js 文件工作正常，请帮助这是我的 webpack.config

const devConfig = {
devtool: '#source-map',
entry: [
    './public/js/entry.js',
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client'
]
,
output: {
    filename: './js/main.js',
    path: '/',
    publicPath: publicPath
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
],
module: {
    rules: [
        {
            test: /\.s(a|c)ss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        },
        {
            test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            loader: 'file-loader?'
        }
    ]
}

};

在我的 scss 文件中，我有这个

src: url('../font-files/firasans-extralightitalic-webfont.woff2') format('woff2'), url('../font-files/firasans-extralightitalic-webfont.woff') format('woff');

} 和我的路径结构

虽然我不断收到此错误

找不到模块：错误：无法解析 '../font-files/firasans-extralightitalic-webfont.woff2'

谁能告诉我怎么了...我看到其他人在 js 文件中添加了字体，但我真的不喜欢那样做

【问题讨论】：

标签： javascript express webpack

【解决方案1】：

好的，我又挣扎了几个小时，现在，我知道如何让它工作了。想法是我们在@font-face中写相对路径，但是路径是相对于入口的，在我的例子中，入口是style.sass，所以我写了这个

src: url('./font-files/firasans-extralightitalic-webfont.woff2')

现在我可以正确解析这些文件了

【讨论】：