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

Question

我有一個vue.js項目 - 我使用了webpack模板。

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

$font-path: '~@/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]') 
    } 
} 

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

Answer 1

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

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

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

---

更新1

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

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

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

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