Npm Lightbox2 CSS网页包无法解析

我正在使用带有NPM和webpack的lightbox

我像往常一样导入SCS

//lightbox2
@import '~lightbox2/dist/css/lightbox.min';

但是webpack给了我这个错误

webpack_1        |         ERROR in ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss)
webpack_1        |         Module not found: Error: Can't resolve '../images/close.png' in '/app/assets/app'
webpack_1        |          @ ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) 33:37-67

特别是，它无法解析图像，因为Lightbox.min.css包含对“../images/close.png”的引用

现在，我想知道在我的文件夹配置中把这些图像放在哪里，这样它们就可以通过webpack解析了

当然，它应该自动识别/加载node_模块，但我试图将一个包含相关图像的图像文件夹放在应用程序文件夹中，但无法解决此问题

任何想法都将不胜感激。

Method1:修改

webpack.config.js

• 我们使用

  resolve url loader

  提供Sass缺少的“url重写”。在transpiler（如sass loader）之后使用它。它利用源映射查找原始源文件并重写url（）语句

module.exports={
//..配置
模块：{
规则：[
{
测试：/\.css$/,，
排除：/node_模块/，
用法：['style-loader'，'css-loader']，
},
{
测试：/\.scss$/,，
排除：/node_模块/，
使用：[
{loader:'style loader'}，
{ 
加载器：“css加载器”，
选项：{
sourceMap:true，
},
}, 
{loader:'解析url加载器'}，
{
加载器：“sass加载器”，
选项：{
sourceMap:true，
}
},
],
},
]
},
};

方法2：验证是否安装并配置了

文件加载程序
库：
npm安装-D文件加载器

module.exports={
//..配置
模块：{
规则：[
//……其他规则
{
测试：//\（svg | jpeg | gif | png | jpg）$/，//lightbox2需要导入png和gif图像
//确保未排除“node_modules”文件夹
使用：{
加载器：“文件加载器”，
选项：{
名称：“[name].[ext]”，
输出路径：“图像”
}
},
},
//……还有其他规则
]
}
Method1:修改
webpack.config.js

我们使用
resolve url loader
提供Sass缺少的“url重写”。在transpiler（如Sass loader）之后使用它。它利用源映射查找原始源文件并重写url（）语句

module.exports={
//..配置
模块：{
规则：[
{
测试：/\.css$/,，
排除：/node_模块/，
用法：['style-loader'，'css-loader']，
},
{
测试：/\.scss$/,，
排除：/node_模块/，
使用：[
{loader:'style loader'}，
{ 
加载器：“css加载器”，
选项：{
sourceMap:true，
},
}, 
{loader:'解析url加载器'}，
{
加载器：“sass加载器”，
选项：{
sourceMap:true，
}
},
],
},
]
},
};

方法2：验证是否安装并配置了
文件加载程序
库：
npm安装-D文件加载器

module.exports={
//..配置
模块：{
规则：[
//……其他规则
{
测试：//\（svg | jpeg | gif | png | jpg）$/，//lightbox2需要导入png和gif图像
//确保未排除“node_modules”文件夹
使用：{
加载器：“文件加载器”，
选项：{
名称：“[name].[ext]”，
输出路径：“图像”
}
},
},
//……还有其他规则
]
}
我遇到了同样的问题，最简单的解决方案是将图像复制到“图像”中。我遇到了同样的问题，最简单的解决方案是将图像复制到“图像”中