Css 网页包sass加载器:如何正确使用字体?
因此,我有以下字体设置:Css 网页包sass加载器:如何正确使用字体?,css,fonts,webpack,vue.js,sass-loader,Css,Fonts,Webpack,Vue.js,Sass Loader,因此,我有以下字体设置: $font-path: '~@/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') for
$font-path: '~@/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
url指向错误的目录。
将$font path
更改为相对于输出文件()的文件夹时,生成失败,因为它找不到字体。使用,并且在您的规则中使用类似的内容(示例取自我的项目):
这将把文件复制到您的构建文件夹中,并将正确的URL插入到CSS中的这些文件中
第二件事是添加到您的scss规则中:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
})
}
我不知道它是否有效,但是看看
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
})
}