Webpack sass-loader：如何正確使用字體？

所以，我有以下字體設置：Webpack sass-loader：如何正確使用字體？

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

構建（與vue.js的WebPack BTW）按預期工作。該應用程序將無法加載字體。 src網址指向錯誤的目錄。當將$font-path更改爲相對於輸出文件（as suggested）的文件夾時，生成失敗，因爲它無法找到字體。

來源

2017-05-30 sandrooco

，我不知道這是否會工作，但看看【解析的URL加載器（https：//開頭github上。 COM/bholloway /決心，網址裝載機） –

使用file-loader並在規則中使用這樣的事情（例如，從我的項目採取）：

{ 
    test: /\.(woff2?|ttf|otf|eot|svg)$/, 
    exclude: /node_modules/, 
    loader: 'file-loader', 
    options: { 
     name: '[path][name].[ext]' 
    } 
}

這將文件複製到你的build文件夾，並會注入正確的網址，這些文件在你的CSS 。

第二件事是添加resolve-url-loader您SCSS規則：

{ 
    test: /\.scss$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap'] 
    }) 
}

來源

2017-05-31 10:57:24

Webpack sass-loader：如何正確使用字體？

回答

相關問題