webpack：無法建立正確的字體路徑

我有一個vue.js項目 - 我使用了webpack模板。webpack：無法建立正確的字體路徑

我們有自定義字體。我引用他們在我的SCSS如下：

$font-path: '[email protected]/assets/fonts/'; 
@font-face { 
    font-family: 'someFont'; 
    src: url('./#{$font-path}someFont/someFont.eot') format('eot'), 
    url('./#{$font-path}someFont/someFont.woff2') format('woff2'), 
    url('./#{$font-path}someFont/someFont.woff') format('woff'), 
    url('./#{$font-path}someFont/someFont.ttf') format('truetype'); 
    font-weight: 200; 
    font-style: normal; 
}

構建的偉大工程 - 字體都放在dist/static/fonts。問題雖然是，上面的scss有錯誤的參考： https://.../projectXY/static/css/static/fonts/someFont.woff2, 應該是https://.../projectXY/static/fonts/someFont.woff2。

我們沒有改變任何的WebPack配置的東西，所以它看起來像這樣：

{ 
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
    loader: 'url-loader', 
    options: { 
     limit: 10000, 
     name: utils.assetsPath('fonts/[name].[ext]') 
    } 
}

我有什麼改變，使其工作？

來源

2017-07-03 sandrooco

您的css文件位於'。/ assets/css'中，而您的字體位於'。/ assets/fonts'中？ – floriangosse

@floriangosse'。/ src/style /'準確地說是 – sandrooco

我更新了以前的答案。 – floriangosse

問題似乎是您的url語句中的相對路徑。

// ... 
url('./#{$font-path}someFont/someFont.woff2') format('woff2'), 
// ...

我想你可以在url部分的開始處刪除./。

更新1

嘗試在你的風格使用相對路徑。

假設你的文件夾結構如下所示：

. 
├── assets 
│   └── fonts 
│    └── font1.woff2 
└── src 
    └── style 
     └── main.scss

參考您的字體在樣式表與../../assets/font1.woff2。這意味着你的情況也要調整變量$font-path。

來源

2017-07-03 07:28:45 floriangosse

'assets'也在'src'裏，對不起。除了我必須使用另一個'../'之外，這是否有所作爲？ – sandrooco

是的，但我認爲問題出現在'$ font-path：'〜@/assets/fonts /'; '。 '〜@'看起來不適合我。你使用[resolve-url-loader]（https://github.com/bholloway/resolve-url-loader）？ – floriangosse

是的，我願意。對我來說奇怪的是，構建工作得很好，但引用沒有。 – sandrooco

webpack：無法建立正確的字體路徑

回答

相關問題