Webpack @ font-face相對路徑問題

我在使用angular2應用程序中的相對路徑加載字體時遇到了問題。Webpack @ font-face相對路徑問題

在app.ts我有這兩個進口

import '../../../public/css/fonts.less'; 
import '../../../public/css/main.less';

的fonts.less我有這樣的@ font-face聲明內：

@font-face { 
    font-family: 'Montserrat'; 
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot'); /* IE9 Compat Modes */ 
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/public/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('/public/fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); /* Legacy iOS */ 
    font-style: normal; 
    font-weight: normal; 
    text-rendering: optimizeLegibility; 
}

這工作得很好。但是，如果我嘗試改變相對路徑，例如

url('../../fonts/Montserrat/Montserrat-Regular.eot');

我收到此錯誤：

ERROR in ./~/css-loader!./~/less-loader!./public/css/fonts.less Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...] @ ./~/css-loader!./~/less-loader!./public/css/fonts.less 6:85-138 ERROR in ./public/css/fonts.less Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...]

有人知道可能是問題嗎？

P.S.我需要使用相對路徑的原因。

來源

2017-02-27 mkolev

-1

在webpack中使用相對路徑沒有特別的理由。您可以使用webpack aliases來擺脫這種必要性。正確使用別名可以解決很多問題，包括這一個。使用別名

resolve: { 
    alias: { 
    styles: path.resolve(__dirname, 'public/src'), 
    fonts: path.resolve(__dirname, 'public/fonts') 
    } 
}

，然後，導入模塊：

import 'styles/fonts.less'; 
import 'styles/main.less';

，並在你的字型：

src: url('fonts/Montserrat/Montserrat-Regular.eot');

我個人傾向於只要指定一個別名爲你的CSS和字體目錄避免在我的webpack構建的項目中使用相對路徑。原因在於它更清潔和可讀，它可以防止在相互依賴的不同位置混合相對路徑時可能出現的問題。因此，您可以在中心位置定義路徑，並讓webpack爲您解析相對路徑。實現此之後

來源

2017-02-28 08:42:05

同樣的錯誤：模塊未找到：錯誤：無法解析「文件」或「目錄」 ./fonts/Montserrat/Montserrat-Regular.eot在 – mkolev

確保你'path.resolve（__目錄名， 'public/fonts'）'解析爲您的實際正確路徑。這只是一個例子 –

當然:)但這是正確的道路。我仍在研究它。 – mkolev

Webpack @ font-face相對路徑問題

回答

相關問題