Webpack "Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' "
17,179
In my case the error was:
Error: Can't resolve '@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome
And I fixed it, adding this to my 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';
note the "~" in $fa-font-path
and this to my webpack.config
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
},
Author by
Admin
Updated on July 18, 2022Comments
-
Admin almost 2 years
I successfully configured webpack for js and sass. It works well until I import font into scss file. I will try to show it in code below.
My webpack config
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() ] };
Admin.scss
// Variables @import "./variables/admin.scss"; @import "./fontawesome.min.css"; @import "./solid.scss"; ALL OTHER NORMAL CSS.....
And this is 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; }
Well, visual studio code plugin watch-sass can resolve it without problems. But now i am using instead webpack. When I didn't import solid.scss it works well but when I import solid.scss I am starting getting errors probably it cant works with fonts files. But I don't know how to fix it. I will be thankful for any advice.
This is example of error
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