I have tried multiple solutions like url-loader configuration but can't be helpful. I also tried asset/resource and asset/inline but not worked for me. Any kind of help is appreciated. Remember I am using Webpack5.
Webpack.config.js (This is my webpack file)
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const dotenv = require("dotenv");
dotenv.config();
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/",
},
devServer: {
hot: true,
port: 3000,
open: true,
historyApiFallback: true,
},
resolve: {
extensions: ["*", ".js", ".jsx", ".css"],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(s[ac]|c)ss$/i,
use: ["css-loader", "sass-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset",
},
{
test: /\.(png|jpg|jpe?g|gif)$/i,
type: "asset",
},
{
test: /\.svg$/,
use: ["@svgr/webpack"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
favicon: "./public/favicon.ico",
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env),
}),
],
};
If I commit this background-image line then build will be compiled successfully
file.scss
.mtd-sales {
background-image: url("../../../images/Rounded_Rectangle4_orders.png");
}
Node version: v14.18.1.
Package.json
{
"name": "nazox",
"version": "2.0.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@expo/webpack-config": "^18.0.1",
"@fullcalendar/bootstrap": "^5.7.0",
"@fullcalendar/daygrid": "^5.7.0",
"@fullcalendar/interaction": "^5.7.0",
"@fullcalendar/react": "^5.7.0",
"@lottiefiles/react-lottie-player": "^3.5.0",
"@lourenci/react-kanban": "^2.1.0",
"@mui/material": "^5.10.7",
"@progress/kendo-react-dialogs": "^5.13.0",
"@react-pdf/renderer": "1.6.8",
"@reduxjs/toolkit": "^1.8.6",
"@syncfusion/ej2-react-popups": "^21.1.41",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7",
"@toast-ui/react-chart": "^1.0.2",
"@vtaits/react-color-picker": "^0.1.1",
"animate.css": "^4.1.1",
"apexcharts": "^3.17.0",
"availity-reactstrap-validation": "^2.6.1",
"axios": "^0.26.1",
"axios-mock-adapter": "^1.20.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^5.0.1",
"bootstrap-daterangepicker": "^3.1.0",
"bootstrap-react-treetable": "^2.0.2",
"broadcast-channel": "^4.18.1",
"buffer": "^6.0.3",
"chart.js": "^2.9.3",
"chartist": "^0.11.4",
"classnames": "^2.3.1",
"compressorjs": "^1.1.1",
"cookie": "^0.5.0",
"copy-webpack-plugin": "^5.1.1",
"cors": "^2.8.5",
"date-fns": "^2.29.3",
"dompurify": "^2.3.10",
"draft-js": "^0.11.4",
"echarts": "^4.7.0",
"echarts-for-react": "^2.0.15-beta.1",
"favicons-webpack-plugin": "^6.0.0",
"file-saver": "^2.0.5",
"filerobot-image-editor": "^3.12.17",
"firebase": "^9.8.1",
"fontkit": "^2.0.2",
"google-maps-react": "^2.0.2",
"highcharts": "^9.3.3",
"highcharts-react-official": "^3.1.0",
"html-to-image": "^1.11.4",
"i18next": "^19.4.5",
"i18next-browser-languagedetector": "^4.2.0",
"jspdf": "^2.5.1",
"jwt-decode": "^3.1.2",
"leaflet": "^1.6.0",
"lodash.clonedeep": "^4.5.0",
"lottie-react": "^2.3.1",
"mdbreact": "^4.25.4",
"metismenujs": "^1.1.0",
"mkdirp": "^1.0.3",
"moment": "2.24.0",
"moment-timezone": "^0.5.28",
"node-sass": "^4.14.1",
"nouislider-react": "^3.3.7",
"pdfjs-dist": "^3.3.122",
"react": "^18.2.0",
"react-apexcharts": "^1.3.6",
"react-autosuggest": "^10.1.0",
"react-avatar": "^4.0.0",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap": "^2.5.0",
"react-bootstrap-daterangepicker": "^7.0.0",
"react-bootstrap-editable": "^0.6.1",
"react-bootstrap-sweetalert": "^5.1.9",
"react-bootstrap-table-next": "^4.0.0",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.2",
"react-chartist": "^0.14.3",
"react-chartjs-2": "^2.9.0",
"react-circle-slider": "^1.6.2",
"react-color": "^2.19.3",
"react-corner-ribbon": "0.0.5",
"react-countdown": "^2.2.1",
"react-cropper": "^1.3.0",
"react-csv": "^2.2.2",
"react-custom-checkbox": "^2.0.1",
"react-customizable-progressbar": "^1.0.3",
"react-date-range": "^1.4.0",
"react-dom": "^18.2.0",
"react-draft-wysiwyg": "^1.14.4",
"react-dropzone": "^10.2.1",
"react-export-table-to-excel": "^1.0.6",
"react-flatpickr": "^3.10.7",
"react-google-invisible-recaptcha": "^1.0.0-rc.2",
"react-google-recaptcha-v3": "^1.9.7",
"react-grid-carousel": "^1.0.1",
"react-html-parser": "^2.0.2",
"react-i18next": "^9.0.10",
"react-icons": "^4.3.1",
"react-image-gallery": "^1.2.9",
"react-image-lightbox": "^5.1.1",
"react-images": "^1.2.0-beta.7",
"react-input-mask": "^2.0.4",
"react-js-pagination": "^3.0.3",
"react-jvectormap": "^0.0.16",
"react-lazy-load-image-component": "^1.5.5",
"react-loading-skeleton": "^3.1.0",
"react-minimal-side-navigation": "^1.9.2",
"react-modal-video": "^1.2.7",
"react-multi-select-component": "^4.2.3",
"react-otp-input": "^2.4.0",
"react-owl-carousel": "^2.3.3",
"react-pdf": "4.0.5",
"react-pdf-to-image": "^1.0.2",
"react-perfect-scrollbar": "^1.5.8",
"react-phone-input-2": "^2.14.0",
"react-pro-sidebar": "^1.0.0-beta.2",
"react-quill": "^1.3.5",
"react-rangeslider": "^2.2.0",
"react-rating": "^2.0.5",
"react-rating-tooltip": "^1.2.0",
"react-redux": "^7.2.4",
"react-render-html": "^0.6.0",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^5.2.0",
"react-script": "^2.0.5",
"react-scripts": "^5.0.1",
"react-search-autocomplete": "^5.4.4",
"react-select": "^4.3.1",
"react-select-search": "^3.0.9",
"react-share": "^4.4.1",
"react-sparklines": "^1.7.0",
"react-star-ratings": "^2.3.0",
"react-switch": "^6.0.0",
"react-timer-hook": "^3.0.5",
"react-to-print": "^2.14.4",
"react-toastr": "^3.0.0",
"reactstrap": "^8.9.0",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"rsuite": "^5.24.1",
"simplebar-react": "^2.3.3",
"socket.io": "^4.4.1",
"socket.io-client": "^4.4.1",
"source-map-explorer": "^2.5.2",
"stream": "0.0.2",
"styled-components": "^5.3.0",
"toastr": "^2.1.4",
"url": "^0.11.0",
"url-exist": "^3.0.0",
"url-exists": "^1.0.3",
"util": "^0.12.5",
"uuid": "^8.3.2",
"validator": "^13.7.0",
"webpack-dev-server": "^4.15.0"
},
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"engines": {
"node": "14.18.0",
"npm": "8.3.0"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"moment": "2.24.0"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
"@svgr/webpack": "^8.0.1",
"babel-loader": "^8.2.2",
"css-loader": "^5.1.3",
"dotenv": "^8.6.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^2.7.5",
"new-url-loader": "^0.1.1",
"resolve-url-loader": "^5.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.27.0",
"webpack-cli": "^4.5.0"
}
}
