为什么webpack scss不想包含字体？

Question

我有一个简单的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

ERROR in ./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 Module not found: Error: Can't resolve '~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

Answer 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; 

希望这能解决您的错误。