我有一个使用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”:true,”id”:”data-v-0312694b”,”scoped”:true,”hasInlineConfig”:false}!./~/sass-loader/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.vue,./~/css-loader?{“minimize”:false,”id”:”data-v-242c44c2″,”scoped”:false,”sourceMap”:false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/TestLib/Tile.vue and 3 others
一些代码和层次结构:
/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"); }
建立/ 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') } }
解决方法
不要使用波浪号〜作为相对路径.这指向node_modules文件夹.所以你必须选择:
- Use
$font_path: '../../fonts/';
as mentioned from @highFlyingSmurfs or- Use
$font_path: '~/src/assets/fonts/';
where~/
points to the project root.
我从Vue CLI使用的sass-loader GitHub页面获得了此信息.