In webpack, the webpack devtool is usually set to enable the sourceMap feature. If you use
sass-loader, when you turn off the sourceMap feature of webpack for production output, you may get an error message like the following.
ModuleNotFoundError: Module not found: Error: Can’t resolve ‘… /… /…/images/abc.png’
After debugging the source code of
sass-loader, I found that
resolve-url-loader relies on the sourceMap information processed by
sass-loader for complex path finding, and the sourceMap switch of
sass-loader is webpack global by default.
When webpack’s sourceMap is turned off,
resolve-url-loader is unable to determine the real file path for
scss files that are
@import, because the sourceMap information is missing, and the relative path finding method is therefore disabled. Please refer to the following quoted code for your own analysis.
Explanation: The code references of the above plug-ins are:
After finding the reason, after analyzing the code logic, we know that opening
sourceMap can solve the problem. The example is as follows.