Module not found: Error: Can't resolve in webpack.common.js - node.js

Question

when I do npm run build I am getting below error
ERROR in ./src/assets/scss/theme.scss
(./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js!./src/assets/scss/theme.scss)
Module not found: Error: Can't resolve
'../../../../fonts/materialdesignicons-webfont.woff?v=4.4.95' in
'D:\Work\BBYN\external\src\assets\scss' #
./src/assets/scss/theme.scss
(./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js!./src/assets/scss/theme.scss)
7:36-106 # ./src/assets/scss/theme.scss #
./src/extensions/masterApplicationCustomizer/MasterApplicationCustomizerApplicationCustomizer.ts
but If I run npm run watch it works properly
My webpack.commom.js is as below
const path = require('path')
const merge = require('webpack-merge')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const SetPublicPathPlugin = require('#rushstack/set-webpack-public-path-plugin').SetPublicPathPlugin
module.exports = merge({
target: 'web',
entry: {
'profile-web-part': path.join(__dirname, '../src/webparts/profile/ProfileWebPart.ts'),
'master-application-customizer-application-customizer': path.join(
__dirname,
'../src/extensions/masterApplicationCustomizer/MasterApplicationCustomizerApplicationCustomizer.ts'
),
'list-data-web-part': path.join(__dirname, '../src/webparts/listData/ListDataWebPart.ts')
},
output: {
path: path.join(__dirname, '../dist'),
filename: '[name].js',
libraryTarget: 'umd',
library: '[name]'
},
performance: {
hints: false
},
stats: {
errors: true,
colors: true,
chunks: false,
modules: false,
assets: false
},
externals: [/^#microsoft\//, 'ProfileWebPartStrings', 'ControlStrings', 'MasterApplicationCustomizerApplicationCustomizerStrings', 'ListDataWebPartStrings'],
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
transpileOnly: true
},
exclude: /node_modules/
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg|gif|dds)$/,
use: [
{
loader: '#microsoft/loader-cased-file',
options: {
name: '[name:lower]_[hash].[ext]'
}
}
]
},
{
test: /\.css$/,
use: [
{
loader: '#microsoft/loader-load-themed-styles',
options: {
async: true
}
},
{
loader: 'css-loader'
}
]
},
{
test: function (fileName) {
return fileName.endsWith('.module.scss') // scss modules support
},
use: [
{
loader: '#microsoft/loader-load-themed-styles',
options: {
async: true
}
},
'css-modules-typescript-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}, // translates CSS into CommonJS
'sass-loader' // compiles Sass to CSS, using Node Sass by default
]
},
{
test: function (fileName) {
return !fileName.endsWith('.module.scss') && fileName.endsWith('.scss') // just regular .scss
},
use: [
{
loader: '#microsoft/loader-load-themed-styles',
options: {
async: true
}
},
'css-loader', // translates CSS into CommonJS
{
loader: 'resolve-url-loader'
},
'sass-loader' // compiles Sass to CSS, using Node Sass by default
]
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
plugins: [
new ForkTsCheckerWebpackPlugin({
tslint: true
}),
new SetPublicPathPlugin({
scriptName: {
name: '[name]_?[a-zA-Z0-9-_]*.js',
isTokenized: true
}
})
]
})

Answer 1

I could solve the issue by using resolve-url-loader module. It can help to somebody Below is part of webpack.js
{
test: function (fileName) {
return !fileName.endsWith('.module.scss') && fileName.endsWith('.scss') // just regular .scss
},
use: [
{
loader: '#microsoft/loader-load-themed-styles',
options: {
async: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}, // translates CSS into CommonJS
'resolve-url-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true
}
} // compiles Sass to CSS, using Node Sass by default
]
}
]