如何配置加載webpack的字體的文件路徑？

我有一堆想要添加到我的Webpack包中的字體。所以我有這個fonts.scss文件看起來像這樣：如何配置加載webpack的字體的文件路徑？

@font-face { 
    font-family: "GiorgioSans-Bold"; 
    src: url("GiorgioSans-Bold.woff") format("woff"), 
    url("GiorgioSans-Bold.ttf") format("truetype") 
}

而且我加載到一個名爲/ build目錄用的WebPack一個SCSS包。這是我的配置文件的樣子。

module.exports = { 
    debug: !production, 
    devtool: production ? false : "eval", 
    entry: "./src/index.jsx", 
    output: { 
     path:   "build", 
     filename:  production ? "[name]-[hash].js" : "bundle.js", 
     chunkFilename: "[name]-[chunkhash].js", 
     publicPath: "build/" 
    }, 
    plugins = [new ExtractPlugin("bundle.css")], 
    module: { 
     loaders: [ 
      { 
       test: /\.scss/, 
       loader: ExtractPlugin.extract("style", "css!sass") 
      }, 
      { 
       test: /\.ttf$/, 
       loader: "file-loader?mimetype=application/octet-stream" 
      }, 
      { 
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
       loader: "url?limit=10000&mimetype=application/font-woff" 
      } 
     ] 
    } 
};

Webpack將字體加載到/ build文件夾中，並將我的fonts.scss文件添加到bundle.css的頂部。

的問題是，這樣做，它改變了@font-face像這樣的網址：

@font-face { 
    font-family: "GiorgioSans-Bold"; 
    src: url(build/GiorgioSans-Bold.woff) format("woff"), 
    url(build/GiorgioSans-Bold.ttf) format("truetype"); 
}

有build/在那裏使得瀏覽器要解決.woff/TTF文件的位置：

文件：/// C：/用戶/ MYNAME的/ dev /應用/ 編譯/構建 /GiorgioSans-Bold.ttf

如何配置與提取 - 文本的WebPack-插件URL路徑或sass加載器或者是css-loader，不管它在做什麼？

來源

2016-07-14 Justin Smith

想通了。在輸出設置中註釋掉publicPath:似乎已修復它。

來源

2016-07-14 21:17:19

如何配置加載webpack的字體的文件路徑？

回答

相關問題