Webpack 带有sass加载器和；解析url加载程序-找不到映像路径

此处的最低可复制设置：

我正试图使用

resolve url loader

向我的scss

url（）

图像路径添加一个hashname，但我花了很长时间才将其用于webpack 4。 我在

/static/img/**

中有一组图像，这些图像在我的SCS中引用，如：

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

这在我的css中是完全一样的（resolve url loader没有找到它们）

当我通过webpack运行以下配置时，我看到resolve loader正在查找正确的

url（）

及其路径，但调试模式显示NOT FOUND

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);
}

//网页包规则配置

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'
              ],
            },
          },
        ],
      },
]

---

我也有同样的问题。我相信

url加载器

可以用webpack4正确加载图像。此设置对我有效：

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

---

事实证明，我所需要的只是

文件加载器

来做我想做的事情

当任何css/sass/样式加载器遇到图像（与我指定的文件扩展名匹配）时，将通过

文件加载器

对其进行处理，该加载器将图像复制到指定命名格式的输出目录，并返回sass加载器用作文件名的名称

规则：[
{
测试：/\（png | jpg | gif | svg）$/，
排除：[
解析（uuu dirname，'./节点u modules'），
],
使用：{
加载器：“文件加载器”，
选项：{
名称：'[path][name]-[hash].[ext]',，
outputPath:“../”，
公共路径：'/dist'，
},
},
},
{
测试：/\.svg$/,，
包括：[
解析（uuu dirname，'./节点u modules'），
],
使用：{
加载程序：“svg内联加载程序”，
选项：{
名称：'[name]-[hash].[ext]',，
},
},
},
{test://\/src\/js\/（？：.*）\.css$/，使用：[{loader:'style loader'}，{loader:'css loader'}]}，
{
测试：[/\.scss$/，/\.sass$/]，
使用：[
MiniCssExtractPlugin.loader，
{
加载器：“css加载器”，
选项：{
sourceMap:true，
root:path.resolve（_dirname），
},
},
{
加载器：“postss加载器”，
选项：{
标识：'邮政编码'，
插件：（）=>[
自动刷新器({
'browsers'：['last 2 versions'，'ie>=10']，
}),
],
sourceMap:true，
},
},
{
加载器：“sass加载器”，
选项：{
outputStyle:'压缩'，
sourceMap:true，
包括道路：[
“./src/scss”，
],
},
},
],
},
{
测试：/\.html$/,，
使用：[
{
加载器：“html加载器”，
选项：{
root:path.resolve（_dirname），
},
},
],
},
{
测试：[
/\/捆绑包\/（？：.*）\.js$/，
],
使用：{
加载器：“巴别塔加载器”，
},
},
];

实际上，有时仍然需要解析url加载程序。。。 这取决于您是否希望能够从sass编译中导入的文件解析url（）调用。在这种情况下，如果没有它，URL将被破坏

但如果您不使用多文件scss构建（例如，如果每个组件只有一个本地scss文件，而不调用共享库scss代码或某些类型的部分），那么您就不需要解析url加载程序

当然，您仍然需要url加载器（使用内联功能包装文件loder）或文件加载器（用于将资源直接复制到dist文件夹）

解析url加载器的工作原理是重新处理sass发出的源映射中的原始文件 在使用dart sass实现时，sass加载程序确实存在源地图问题。在这种情况下，sourcemap源将被错误地用stdin代替文件名 来看看，把它修好

---

到今天（2019年7月）为止，这仍然是未发布的修复程序，唯一的选择是使用节点sass或使用未发布的sass加载程序

您有用于此修复程序的github吗？我处理同样的问题，但我无法解决。你对此有参考资料吗？我用webpack 4尝试了“url加载器”，CSS中的url没有进行base64编码。我在回答中链接到了

url加载器

Github。标题

limit

下有一个注释，描述了如何获取base64编码。