字体的相对路径不适用于 sass-loader答案

【问题标题】：Relative path to fonts not working with sass-loader字体的相对路径不适用于 sass-loader
【发布时间】：2018-03-08 05:27:25
【问题描述】：

我有一个使用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,"sourceMap":false}!./~/vue-loader/lib/样式编译器？{"vue":true,"id":"data-v-242c44c2","scoped":false,"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/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')
  }
}

【问题讨论】：

你试过../../fonts/而不是~吗？

标签： webpack sass vue.js

【解决方案1】：

不要使用波浪号 ~ 作为相对路径。这指向node_modules 文件夹。所以你必须选择：

使用@highFlyingSmurfs 中提到的$font_path: '../../fonts/'; 或

使用$font_path: '~/src/assets/fonts/';，其中~/ 指向项目根目录。

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

【讨论】：