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

Posted 2023-02-19

【中文标题】字体的相对路径不适用于 sass-loader

【英文标题】：Relative path to fonts not working with 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/而不是~吗？

【参考方案1】：

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

使用@highFlyingSmurfs 中提到的$font_path: '../../fonts/'; 或 使用$font_path: '~/src/assets/fonts/';，其中~/ 指向项目根目录。

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