我有一个完全干净的项目利用 vue-templates/pwa
. 一切都按预期工作 . 加载了SCSS文件,但字体的路径失败 .
错误消息:
assets / fonts / DIN / din_alternate_bold_1-webfont.ttf in ./~/css-loader?{“minimize”:false,“sourceMap”:false}!./~ / vue-loader / lib / style-compiler?{ “VUE”:真实的, “ID”: “数据-v-0312694b”, “作用域”:真实的, “hasInlineConfig”!?假} ./〜/上海社会科学院装载机/ lib目录/ loader.js { “的includepaths”: [“./src/assets/scss"],"data":"@import /"base.scss/";","sourceMap":false}!./~/vue-loader/lib/selector.js? type = styles&index = 0!./rc / components / TestLib.vue, . /〜/ css-loader?{"minimize“:false,”sourceMap“:false}} /〜/ vue-download / lib / style-编译器{ “VUE”:真实的, “ID”: “数据-v-242c44c2”, “作用域”:假的, “hasInlineConfig”:假}?./〜/上海社会科学院装载机/ lib目录/ loader.js {”!? includePaths“:[” . / src / assets / scss“],”data“:”@ import /"base.scss/";","sourceMap":false}!./~/vue-loader/lib/selector .js?type = styles&index = 0! . / src / components / TestLib / Tile.vue和另外3人
一些代码和层次结构:
/src
/assets
/fonts
/DIN
din_alternate_bold_1-webfont.ttf
/scss
/base
_typography.scss
base.scss
base.scss
@import 'base/typography'
_typography.scss
$font_path: '~assets/fonts/';
@font-face {
font-family: "DinAltBold";
src: url($font_path + "DIN/din_alternate_bold_1-webfont.ttf");
}
build/utils.js
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass', {
includePaths: ['./src/assets/scss'],
data: '@import "base.scss";'
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
1 回答
不要使用波浪号
~
作为相对路径 . 这指向node_modules
文件夹 . 所以你必须选择:我从sass-loader使用的sass-loader GitHub页面获得了这些信息 .