node.js - Webpack“找不到模块:错误:无法解析'../webfonts/fa-solid-900.eot'”
问题描述
我成功地为 js 和 sass 配置了 webpack。在我将字体导入 scss 文件之前,它运行良好。我将尝试在下面的代码中显示它。
我的 webpack 配置
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MinifyPlugin = require('babel-minify-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})],
},
entry: path.resolve(__dirname + '/public/src/js/adminMain.js'),
output: {
path: path.resolve(__dirname + '/public/dist/'),
filename: 'adminBundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},
test: /\.(sa|sc|c)ss$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: "css-loader",
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader",
options: {
implementation: require("sass")
}
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "adminBundle.css"
}),
new MinifyPlugin()
]
};
管理员.scss
// Variables
@import "./variables/admin.scss";
@import "./fontawesome.min.css";
@import "./solid.scss";
ALL OTHER NORMAL CSS.....
这是solid.scss
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: auto;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
好吧,Visual Studio 代码插件 watch-sass 可以毫无问题地解决它。但现在我使用的是 webpack。当我没有导入solid.scss 时,它运行良好,但是当我导入solid.scss 时,我开始收到错误,可能它不能与字体文件一起使用。但我不知道如何解决它。我会感谢任何建议。
这是错误的例子
ERROR in ./public/src/css/admin.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js??ref--4-3!./public/src/css/admin.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' in 'C:\Users\XXXXXXXXXX\Praca\Webové aplikácie\nodeCMS\public\src\css'
@ ./public/src/css/admin.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js??ref--4-3!./public/src/css/admin.scss) 5:38-77 6:38-77
解决方案
就我而言,错误是:
Error: Can't resolve '@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome
我修复了它,将它添加到我的 index.scss
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';
注意 $fa-font-path 中的“~”
这是我的 webpack.config
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
},
推荐阅读
- android-sqlite - Android SQLite 不返回给定搜索词的数据
- sql - 如何在sql中添加两个参数并获取值(将代码pl/sql转换为sql)
- powershell - Powershell 电子邮件添加抄送字段
- r - 复位累计时间
- bash - 列出大于 X 值且小于 Y 的文件
- c# - 从 DataGridTemplateColumn 中的自定义控件中获取值
- javascript - 从多维数组访问数据 - Ajax 响应
- java - 如何在 hazelcast 中跨主线程和入口侦听器进行事务?
- c - 编写 n 个后续操作或使用从 0 到 n 的 for 循环之间的执行速度是否存在差异?
- apache - 从外部浏览器访问我的 AWS EC2 服务器 index.html