与sass加载器不工作的字体的相对路径

Question

我有一个完全干净的项目，利用vue模板/pwa。一切都按计划进行。已加载SCSS文件，但字体路径失败。

错误消息：

资产/fonts/DIN/DIN\u替换\u粗体\u 1-webfont。ttf输入/~/css加载器？{“最小化”：false，“源映射”：false}/~/vue加载程序/库/样式编译器？{“vue”：true，“id”：“data-v-0312694b”，“scoped”：true，“hasInlineConfig”：false}/~/sass加载程序/lib/loader。js？{“includePaths”：[“/src/assets/scss”]，“data”：“@import/”base.scss/”；“，“sourceMap”：false}/~/vue加载程序/库/选择器。js？类型=样式

一些代码和层次结构：

/src
    /assets
        /fonts
            /DIN
                din_alternate_bold_1-webfont.ttf
        /scss
            /base
                _typography.scss
            base.scss      

基础scss

@import'基础/排版'

_印刷术。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')
  }
}

Answer 1

不要对相对路径使用tilde~。这指向节点\u modules文件夹。因此，您必须选择：

1. 使用$font\u路径：'..//字体/' 如@highFlyingSmurfs或

我从Vue CLI使用的sass loader GitHub页面获得了此信息。