Fontawesome字体未使用Aurelia、SCS和webpack加载

所以我有我正在使用的Aurelia、Bulma、Scss、Fontawesome和Webpack。我用纱线安装了Bulma和FontAwesome。两者的样式表看起来都完好无损

这是我的，除了这个，一切似乎都正常

我有这个

@import "~@fortawesome/fontawesome-free";
@import "~bulma";

$fa-font-path: "../webfonts";

最后是我的，这正是奥雷莉亚创造的

const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const CopyWebpackPlugin=require（'copy-webpack-plugin'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const DuplicatePackageCheckerPlugin=require（'duplicate-package-checker-webpack-plugin'）；
const project=require（'./aurelia_project/aurelia.json'）；
const{AureliaPlugin，ModuleDependenciesPlugin}=require（'aurelia-webpack-plugin'）；
const{ProvidePlugin}=require（'webpack'）；
const{BundleAnalyzerPlugin}=require（'webpack-bundle-analyzer'）；
const CleanWebpackPlugin=require（'clean-webpack-plugin'）；
//配置帮助程序：
const ensureArray=（config）=>config&&（Array.isArray（config）？config:[config]）||[]；
const when=（条件、配置、负配置）=>
条件ensureArray（配置）：ensureArray（negativeConfig）；
//主配置：
const title='Aurelia导航框架'；
const outDir=path.resolve（\u dirname，project.platform.output）；
const srcDir=path.resolve（uu dirname，'src'）；
const nodeModulesDir=path.resolve（uu dirname，'node_modules'）；
常量baseUrl='/'；
常数cssRules=[
{loader:'css loader'}，
{
加载器：“postss加载器”，
选项：{插件：（）=>[
需要（'autoprefixer'）（），
要求（'cssnano'）（）
] }
}
];
常数sassRules=[
{
加载器：“sass加载器”，
选项：{
sassOptions：{
IncludePath:[“节点\模块”]
}
}
}
];
module.exports=（{production}={}，{extractCss，analyze，tests，hmr，port，host}={}）=>({
决心：{
扩展名：['.ts'，'.js']，
模块：[srcDir，'node_modules']，
//强制执行单个aurelia绑定，以避免由于
//对第三方aurelia插件的过时依赖
别名：{'aurelia binding'：path.resolve（_dirname，'node_modules/aurelia binding'）}
},
条目：{
应用程序：['aurelia-bootstrapper']
},
模式：生产？‘生产’：‘发展’，
输出：{
路径：outDir，
publicPath:baseUrl，
文件名：产品？'[name].[chunkhash].bundle.js':'[name].[hash].bundle.js'，
sourceMapFilename:production？'[name].[chunkhash].bundle.map':'[name].[hash].bundle.map'，
chunkFilename:production？'[name].[chunkhash].chunk.js':'[name].[hash].chunk.js'
},
优化：{
runtimeChunk:true，//分离长期缓存所需的运行时块
//moduleIds是HashedModuleIdsPlugin和NamedModulesPlugin的替代品，在中不推荐使用https://github.com/webpack/webpack/releases/tag/v4.16.0
//根据模块的相对路径更改模块id以使用哈希，这是长期可缓存性所必需的
moduleIds:'哈希'，
//使用splitChunks将App/Aurelia捆绑包分解为更小的块
// https://webpack.js.org/plugins/split-chunks-plugin/
分割块：{
hidePathInfo:true，//在使用maxSize时防止在文件名中使用路径
块：“首字母”，
//缩小前，将尺寸与来源进行比较
maxInitialRequests:Infinity，//默认值为3，如果使用HTTP/2，则使其不受限制
maxAsyncRequests:Infinity，//默认值为5，如果使用HTTP/2，则使其不受限制
minSize:10000，//仅当块大于minSize时才创建块，根据需要进行调整
maxSize:40000，//如果大于40k，则分割块，根据需要进行调整（在webpack v4.15中添加了maxSize）
缓存组：{
default:false，//禁用内置组default和vendors（下面重新定义了vendors）
//如果要拆分特定模块，可以在此处插入其他cacheGroup条目
//在使用--extractCss时，为了将供应商css从应用程序css中分离出来，这是必需的
//例如，要分离字体和引导，请执行以下操作：
//fontawesome:{//将font awesome css与应用程序css分离（font awesome仅为css/字体）
//名称：'vendor.font-awesome'，
//测试：/[\/]节点单元模块[\\/]字体真棒[\\/]，
//优先：100，
//执行：正确
// },
//bootstrap:{//将bootstrap js与供应商分开，并将bootstrap css与应用程序css分开
//名称：'vendor.font-awesome'，
//测试：/[\/]节点单元模块[\\/]引导[\\/]，
//优先：90，
//执行：正确
// },
//这是HTTP/2优化的缓存组配置
//通用“初始/同步”供应商节点模块拆分：分离较大的模块
vendorSplit:{//如果模块大于minSize，则将每个节点模块作为单独的块文件
测试：/[\/]节点单元模块[\\/]/,，
名称（模块）{
//从节点_模块后的路径段中提取包的名称
const packageName=module.context.match（/[\\/]节点\模块[\\/]（.*）（[\\/]\$）/）[1]；
返回'vendor.${packageName.replace（'@'，''）}`；
},
优先：20
},
供应商：{//从小于minSize的node_模块获取正在使用的所有其他内容
测试：/[\/]节点单元模块[\\/]/,，
名称：“供应商”，
优先事项：19，
enforce:true//create chunk，而不管chunk的大小
},
//通用“异步”供应商节点模块拆分：分离较大的模块
vendorAsyncSplit:{//vendor async chunks，如果模块大于，则将每个异步使用的节点模块创建为单独的块文件
@import "~@fortawesome/fontawesome-free";

@import "~@fortawesome/fontawesome-free/css/all.css";

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";