Webpack Web包-解析url加载程序无法正确解析路径

在我的网页配置中正确设置

resolve url loader

有问题。它似乎根本无法解析

scss

文件中的路径

以下是我的项目文件夹结构：

├───config
│   └───jest
├───public
│   └───assets
│       ├───css
│       ├───fonts
│       ├───images
│       │   ├───background
│       │   ├───icons
│       │   ├───illustration
│       │   ├───logo
│       │   └───projects
│       │       ├───one
│       │       └───two
│       ├───js
│       └───scss
│           ├───blog
│           ├───common
│           ├───default
│           ├───elements
│           ├───header
│           └───template
├───scripts
└───src
    ├───component
    │   ├───common
    │   ├───footer
    │   ├───header
    │   └───slider
    ├───elements
    │   ├───blog
    │   ├───common
    │   ├───portfolio
    │   ├───projects
    │   └───tab
    └───home

下面您将看到

webpack.config.js

的样子。这有点复杂，但我试图隐藏我认为与解决此问题无关的所有代码块。通常，

use

方法中的加载程序链是由文件开头定义的

getStyleLoaders

函数创建的。如果

预处理器

被标识为

sass加载器

，则另外添加

解析url加载器

。问题是，当查看

解析url加载程序的调试时，它似乎没有解析
公用
文件夹中scss文件中的url。我得到的唯一调试日志如下所示：

解析url加载程序
调试日志：

resolve-url-loader: ./node_modules/slick-carousel/slick/slick-theme.css: ./ajax-loader.gif
  ./node_modules/slick-carousel/slick
  FOUND
resolve-url-loader: ./node_modules/slick-carousel/slick/slick-theme.css: ./fonts/slick.eot
  ./node_modules/slick-carousel/slick
  FOUND
resolve-url-loader: ./node_modules/slick-carousel/slick/slick-theme.css: ./fonts/slick.woff
  ./node_modules/slick-carousel/slick
  FOUND
resolve-url-loader: ./node_modules/slick-carousel/slick/slick-theme.css: ./fonts/slick.ttf
  ./node_modules/slick-carousel/slick
  FOUND
resolve-url-loader: ./node_modules/slick-carousel/slick/slick-theme.css: ./fonts/slick.svg
  ./node_modules/slick-carousel/slick


我在
scss
文件中定义了一些url链接，但在“调试”日志中看不到这些链接。
我做错了什么

webpack.config.js
详细信息：

“严格使用”；
/*一些插件*/
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const optimizecssassetplugin=require（'optimize-css-assets-webpack-plugin'）；
const safepostsssparser=require（'postsss-safe-parser'）；
const ManifestPlugin=require（'webpack-manifest-plugin'）；
const InterpolateHtmlPlugin=require（'react-dev-utils/InterpolateHtmlPlugin'）；
/*一些插件*/
const getCSSModuleLocalIdent=require（'react-dev-utils/getCSSModuleLocalIdent'）；
常量路径=需要（'./路径'）；
常量模块=需要（'./模块'）；
/*一些插件*/
const postsnormalize=require（'postsss-normalize'）；
const shouldUseSourceMap=process.env.GENERATE\u SOURCEMAP！='“真”；
const shouldInlineRuntimeChunk=process.env.INLINE\u RUNTIME\u CHUNK！='假'；
const useTypeScript=fs.existsSync（path.appTsConfig）；
常量cssRegex=/\.css$/；
常量cssModuleRegex=/\.module\.css$/；
const sassRegex=/\（scss|sass）$/；
const sassModuleRegex=/\.module\（scss | sass）$/；
module.exports=函数（WebPackageNV）{
const isEnvDevelopment=webpackEnv==‘development’；
const isEnvProduction=webpackEnv==‘production’；
//Webpack使用“publicPath”确定应用程序的服务来源。
//它需要一个尾随斜杠，否则文件资源将获得不正确的路径。
//在开发中，我们总是从根本上服务。这使得配置更容易。
const publicPath=isEnvProduction
？path.servedPath
：isEnvDevelopment&“/”；
常量应为UserRelativeAssetPath=publicPath==='。/'；
const publicUrl=isEnvProduction
？publicPath.slice（0，-1）
：isEnvDevelopment和“”；
//获取要注入到我们的应用程序中的环境变量。
const env=getClientEnvironment（publicUrl）；
//获取样式加载器的通用函数
const getStyleLoaders=（cssOptions，预处理器）=>{
常量加载程序=[
isEnvDevelopment&&require.resolve（'style-loader'），
ISENV生产与销售部{
加载器：MiniCssExtractPlugin.loader，
选项：shouldUserRelativeAssetPath？{publicPath:'../../'}:{}，
},
{
加载器：require.resolve（'css-loader'），
选项：CSS选项，
},
{
加载器：require.resolve（'postss-loader'），
选项：{
标识：'邮政编码'，
插件：（）=>[
需要（'PostSS-flexbugs-fixes'），
需要（'postss-preset-env'）({
自动刷新器：{
flexbox:‘no-2009’，
},
阶段:3,，
}),
postsssnormalize（），
],
sourceMap:isEnvProduction&应使用sourceMap，
},
},
].过滤器（布尔值）；
if（预处理器）{
if（预处理器==“sass加载器”）{
装载机推送({
加载器：require.resolve（'resolve-url-loader'），
选项：CSS选项，
})
}
装载机推送({
加载器：require.resolve（预处理器），
选项：{
sourceMap:isEnvProduction&应使用sourceMap，
},
});
}
返回装载机；
};
返回{
模式：isEnvProduction？“production”：isEnvDevelopment&“development”，
保释金：艾森瓦生产，
开发工具：isEnvProduction
？应该使用源地图吗
“源地图”
：错
：isEnvDevelopment&“廉价模块源代码映射”，
条目：[/*…*/].filter（布尔），
输出：{/*…*/}，
优化：{/*…*/}，
解析：{/*…*/}，
resolveLoader:{/*…*/}，
模块：{
StrightExportPresence：没错，
规则：[
{解析器：{requirensure:false}}，
{
/*es皮棉装载机*/
},
{
其中一项：[
{
测试：[/\.bmp$/，/\.gif$/，/\.jpe？g$/，/\.png$/]，
加载器：require.resolve（'url-loader'），
选项：{
限额：10000，
名称：'static/media/[name].[hash:8].[ext]'，
},
},
{/*babel loader*/}，
},
{/*babel loader*/}，
{
测试：cssRegex，
排除：cssModuleRegex，
用法：getStyleLoaders({
进口装载机：1，
sourceMap:isEnvProduction&应使用sourceMap，
}),
副作用：没错，
},
{
测试：cssModuleRegex，
用法：getStyleLoaders({
进口装载机：1，
sourceMap:isEnvProduction&应使用sourceMap，
模块：对，
getLocalIdent:getCSSModuleLocalIdent，
}),
},
{
测试：sassRegex，
不包括：sassModuleRegex，
用法：getStyleLoaders(
{
进口装载机：2，
sourceMap:isEnvProduction&应使用sourceMap，