如何在webpack中爲文件加載器設置特定的前綴？

Question

我頂嘴文件與字體：

$icons-font-path: "~material-design-icons/iconfont/"; 

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(#{$icons-font-path}/MaterialIcons-Regular.woff2) format('woff2'); 
} 

和文件加載器下載的字體到指定目錄（/home/user/project/example/src/static/fonts/）：

{ 
    test: /\.(woff|woff2|eot|ttf)$/, 
    loader: 'file', 
    query: { 
     name: path.join(STATIC_PATH, 'fonts', '/[name]-[hash].[ext]') 
    } 
    }, 

這對我的工作很好，但出來的CSS具有相同路徑url，如：

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(/home/user/project/example/src/static/fonts/MaterialIcons-Regular.woff2) format('woff2'); 
} 

如何複製woff2到一個特定的目錄和組url(prefix/MaterialIcons-Regular.woff2)的具體前綴？

Answer 1

的resolve-url-loader將允許您指定的字體url()相對於你.sass文件。 .css應該有一個Webpack可以解析爲模塊的路徑URL。

關鍵是Webpack要找到您在url()聲明中指定的所有資產。那時resolve-url-loader已完成工作。應該永遠不需要absolute選項，因爲您應該始終設置Webpack以查找所有「模塊」，包括資產。

默認情況下（我不是Webpack的專家），所有的CSS和資產都被複制到輸出，正確的相對路徑被重寫爲css url()語句。

我在想，問題的癥結在於CDN部署，您需要一些絕對前綴。如果是這種情況，請參閱public path屬性。我自己並沒有使用它，但它似乎是相關的。

Answer 2

您可能會想要使用sass-loader和resolve-url-loader的某種組合。

你的WebPack裝載機配置將是這個樣子：

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test : /\.scss$/, 
     loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap'] 
     } 
    ] 
    }, 
    resolveUrlLoader: { 
     absolute: '/prefix' 
    } 
};