Webpack 4 with sass-loader & resolve-url-loader - 找不到图像路径

Question

此处的最小可重现设置：https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

我试图使用resolve-url-loader将哈希名称添加到我的 scssurl()图像路径中，但我花了很长时间让它与 webpack 4 一起使用。 我有一堆/static/img/**图像在我的 SCSS 中引用，例如：

span.arrow {
background: url(/static/img/audiences.png);
}

在我的 css 中，它最终以完全相同的方式结束(解析网址加载器找不到它们)

当我通过 webpack 运行以下配置时，我看到解析加载程序找到了正确的url()及其路径，但调试模式显示未找到。

resolve-url-loader: /static/img/audiences.png
/Users/usr1/webpack_playground/src
/Users/usr1/webpack_playground/static/img
NOT FOUND

是否有一些不正确的输出配置？我已经尝试了各种设置组合，但无济于事：

loader: 'resolve-url-loader',
options: {
debug: true,
root: path.join(__dirname, './static/img'),
includeRoot: true,
absolute: true,
},

我的最终目标是让文件加载器将它们转换为/dist 哈希版本：

span.arrow {
background: url(/static/img/audiences-dhsye47djs82kdhe6.png);
}

Webpack 规则配置

rules: [
{
test: /.(png|jpg|gif)$/,
include: [
path.resolve(__dirname, './static/img'),
],
use: {
loader: 'file-loader',
options: {
name: '[name]-[hash].[ext]',
},
},
},
{
test: /.svg$/,
use: {
loader: 'svg-inline-loader',
options: {
name: '[name]-[hash].[ext]',
},
},
},
{ test: //src/js/(?:.*).css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
{
test: [/.scss$/, /.sass$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'resolve-url-loader',
options: {
debug: true,
root: './static/img',
includeRoot: true,
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: [
'./src'
],
},
},
],
},
]

Answer 1

事实证明，我所需要的只是file-loader做我想做的事。

当任何 css/sass/style 加载器遇到图像(与我指定的文件扩展名匹配)时，它通过file-loader进行处理，这既会将其复制到以指定的命名格式指定的输出目录，又会返回 sass 加载器的名称以用作文件名。

rules: [
{
test: /.(png|jpg|gif|svg)$/,
exclude: [
path.resolve(__dirname, './node_modules'),
],
use: {
loader: 'file-loader',
options: {
name: '[path][name]-[hash].[ext]',
outputPath: '../',
publicPath: '/dist',
},
},
},
{
test: /.svg$/,
include: [
path.resolve(__dirname, './node_modules'),
],
use: {
loader: 'svg-inline-loader',
options: {
name: '[name]-[hash].[ext]',
},
},
},
{ test: //src/js/(?:.*).css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
{
test: [/.scss$/, /.sass$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
root: path.resolve(__dirname),
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
'browsers': ['last 2 versions', 'ie >= 10'],
}),
],
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: [
'./src/scss',
],
},
},
],
},
{
test: /.html$/,
use: [
{
loader: 'html-loader',
options: {
root: path.resolve(__dirname),
},
},
],
},
{
test: [
//bundles/(?:.*).js$/,
],
use: {
loader: 'babel-loader',
},
},
];

Answer 2

实际上有时仍然需要解析网址加载器... 这取决于您是否希望能够解析来自 SASS 编译中导入的文件的 url() 调用。没有它，在这种情况下，url将被破坏。

但是，如果您不使用多文件 scss 构建(例如，如果每个组件只有 1 个本地 scss 文件，而无需调用共享库 scss 代码或某种部分) - 那么您不需要解析 url-loader。

当然，您仍然需要url加载器(具有内联功能包装文件管理器)或文件加载器(用于将资产直接复制到dist文件夹)

Resolve-url-loader 的工作原理是从 Sass 发出的源映射中重新处理原始文件 SAS-loader 在使用 dart-sass 实现时确实存在源映射问题。在这种情况下，源映射源将错误地代替文件名 stdin。 请参阅问题 671 和 PR 681 中的修复

截至今天(2019年7月)，这仍然是未发布的修复程序，唯一的选择是使用node-sass或使用未发布的sass-loader

Answer 3

我遇到了同样的问题。 我相信您需要url-loader才能使用 Webpack 4 正确加载图像。 这个设置对我有用：

rules: [
{
test: /.(png|jpg)$/,
loader: "url-loader",
}, {        
test: /.(scss|css)$/,
use: [
"style-loader",
"css-loader",
"sass-loader",
]
}
]