使用Webpack和font-face加載字體

我想使用@ font-face在我的CSS文件中加載字體，但字體永遠不會加載。這是我的目錄結構。使用Webpack和font-face加載字體

然後在webpack.config.js我有裝載機獲得字體。

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    "./index.js" 
    ], 
    output: { 
    path: __dirname+"/build", 
    filename: "main.js" 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ }, 
      { test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ }, 
      { test: /\.svg$/, loader: "raw" }, 
      { test: /\.css$/, loader: "style-loader!css-loader" }, 
      { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'} 

     ] 
    } 
};

在我的CSS文件，我有這樣的：

@font-face { 
    font-family: 'Darkenstone'; 
    src: url('./Darkenstone.woff') format('woff'); 
} 

body { 
    background-color: green; 
    font-size: 24px; 
    font-family: 'Darkenstone'; 
}

最後，我打電話給我的CSS文件中我index.js有：

import './src/css/master.css';

一切正常，但德字體從不加載。謝謝。

來源

2017-08-03 Ebenizer Pinedo

哪個webpack，config看起來像1.x？ –

是webpack 1.10.1 –

在嘗試了很多東西后，下一個裝載器完成了工作。我使用了url-loader而不是文件加載器。你需要安裝url-loader。

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

來源

2017-08-04 02:18:37

試着改變你的裝載機

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=[name].[ext]'}

，並添加publicPath: 'build/'您output關鍵。

來源

2017-08-03 18:17:29 Esben

在我的輸出路徑（webpack.config.js）中有「構建」，所以使用該加載程序我得到構建內的另一個生成文件夾。像構建/構建。 –

噢好吧，我已經從裝載程序中刪除了構建/刪除。這應該把字體放在build文件夾的根目錄下，是嗎？然後將'publicPath：'build /''添加到'output'。您可以打開index.html並找到樣式標籤，並查看該字體的網址是什麼，應該是'build/Darkenstone.woff' – Esben

我在mi控制檯中出現此錯誤： 95％emitError：EACCES：權限被拒絕，打開'/Darkenstone.woff' at Error（native）我已經刪除路徑：__dirname +「/ build」添加publicPath，這是好嗎？ –

使用Webpack和font-face加載字體

回答

相關問題