字體真棒字體不加載在生產中，但加載罰款使用webpack-dev-server

我想在項目中使用字體真棒。我在開發過程中使用webpack-dev-server並且字體加載正常，但是當我使用webpack構建並打開結果（本地或託管在服務器上）時，woff,woff2和ttf文件都無法加載。字體真棒字體不加載在生產中，但加載罰款使用webpack-dev-server

我使用的是file-loader模塊來處理所有的字體類型是這樣的：

{test: /\.(eot|svg|ttf|woff|woff2)/, loader: "file"},

而我包括字體真棒SASS文件中像這樣：

$fa-font-path: "./font-awesome-4.5.0/fonts"; 
@import "./font-awesome-4.5.0/scss/font-awesome.scss";

的我的webpack build的結果是一個與我的文件夾index.html,bundle.js和所有的字體文件。 Chrome開發者控制檯顯示的文件無法加載，但它們具有正確的文件名。

來源

2016-02-04 SimpleJ

問題是我的webpack配置有publicPath: "/"，所以這些文件是在我的文件系統的根目錄而不是我的項目目錄中。

更改爲publicPath: ""修復了此問題。

來源

2016-02-07 22:44:53 SimpleJ

您可以嘗試將其作爲供應商依賴項包含在sass中：npm i -D font-awesome。這可能是字體路徑不正確匹配。

module.exports = { 
    entry: { 
    main: './js/index.js', 
    vendor: [ 
     'font-awesome\css\font-awesome.css', 
    ], 
    }, 
    output: { 
    path: 'bundles', 
    filename: '[name].js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.css', 'scss'] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.css$/, loaders: ['style', 'css'] }, 
     { 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" } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin(
     'vendor', '[name].js' 
    ) 
    ] 
};

該css它將包括它與vendor.js文件內聯。

來源

2016-02-04 21:42:49

雖然我不明白它可能是一個路徑問題。我的構建的輸出包括所有的字體文件，當服務器請求它們時，它沒有路徑。例如，我的內部版本有'a3de2170e4e9df77161ea5d3f31b2668.ttf'文件，當我運行'index.html'時，控制檯說'GET file：///a3de2170e4e9df77161ea5d3f31b2668.ttf net :: ERR_FILE_NOT_FOUND'。我知道該文件在那裏，它正在請求正確的文件路徑。 – SimpleJ

是'file：///a3de2170e4e9df77161ea5d3f31b2668.ttf'控制檯中字體的確切路徑？ –

是的。我想我其實只是發現了這個問題。我在我的webpack配置中有'publicPath：「/」'，但它應該是'publicPath：'「'。這似乎解決了這個問題。 – SimpleJ

字體真棒字體不加載在生產中，但加載罰款使用webpack-dev-server

回答

相關問題