为啥 webpack scss 不想包含字体？

Posted 2023-03-15

【中文标题】为啥 webpack scss 不想包含字体？

【英文标题】：Why webpack scss doesnt want to include fonts?为什么 webpack scss 不想包含字体？

【发布时间】：2018-01-20 15:35:06

【问题描述】：

我有一个简单的 scss 文件

$fa-font-path: "~font-awesome/fonts";
$bootstrap-sass-asset-helper: false !default;
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$icon-font-name: "glyphicons-halflings-regular" !default;
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import '~font-awesome/scss/font-awesome';

*, *:before, *:after 
  box-sizing: border-box;


html 
  position: relative;
  min-height: 100%;


body 
  background-color: $bg;
  margin-bottom: 60px;

我的 webpack 加载器看起来像这样：

  
    test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
    use: 
      loader: 'url-loader',
      options: 
        limit: 10000,
        mimetype: 'application/font-woff'
      
    
  ,
  
    test: /\.(ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: 'file-loader'
  ,
  
    test: /\.scss$/,
    include: [
      path.resolve(process.cwd(), "src/client/assets/styles"),
    ],
    use: ExtractTextPlugin.extract(
      fallback: "style-loader",
      use: [
        
          loader: "css-loader",
          options: 
            sourceMap: true,
            modules: true,
            importLoaders: 1,
            localIdentName: '[local]_[hash:base64:3]'
          
        ,
        
          loader: "postcss-loader",
          options: postcssLoaderOptions
        ,
        
          loader: "sass-loader",
          options: 
            sourceMap: true,
            outputStyle: "compressed"
          
        
      ]
    )
  ,

但在尝试包含我的 scss 文件时出现错误

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0'

更改modules: true, 的值会有所帮助，但我想将其保留为true

错误 ./node_modules/css-loader?"sourceMap":true,"modules":true,"importLoaders":1,"localIdentName":"[local]_[hash:base64:3]"!./node_modules/ postcss-loader/lib?"plugins":[null],"sourceMap":true!./node_modules/sass-loader/lib/loader.js?"sourceMap":true,"outputStyle":"compressed" !./src/client/assets/styles/styles.scss 未找到模块：错误：无法解析 '~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0' in '/Users/vardius/Projects/webpack/src/client/assets/styles' @ ./node_modules/css-loader?"sourceMap":true,"modules":true,"importLoaders":1,"localIdentName":"[local]_[hash:base64:3]"!./node_modules /postcss-loader/lib?"plugins":[null],"sourceMap":true!./node_modules/sass-loader/lib/loader.js?"sourceMap":true,"outputStyle":"compressed "!./src/client/assets/styles/styles.scss 7:134621-134683

【参考方案1】：

我遇到了同样的问题，我找到了解决此错误的方法。

首先我删除了font-awesome scss文件夹中_path.scss中字体文件之后的版本号。

    src: url('#$fa-font-path/fontawesome-webfont.eot');
    src: url('#$fa-font-path/fontawesome-webfont.eot') format('embedded-opentype'),
    url('#$fa-font-path/fontawesome-webfont.woff2') format('woff2'),
    url('#$fa-font-path/fontawesome-webfont.woff') format('woff'),
    url('#$fa-font-path/fontawesome-webfont.ttf') format('truetype'),
    url('#$fa-font-path/fontawesome-webfont.svg#fontawesomeregular') format('svg');

然后我将完整文件夹路径添加到 $fa-font-path 变量

$fa-font-path : "./assets/vendor/font-awesome/fonts" !default;

希望这能解决您的错误。

【讨论】：

不需要去掉版本号，只要设置$fa-font-path变量就可以了