bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 70 forks source link

Conflict with responsive-loader #81

Closed strarsis closed 6 years ago

strarsis commented 6 years ago

responsive-loader doesn't receive any parameters when resolve-url-loader is used.

Example for reproducing the issue (from sage9 theme): https://github.com/strarsis/sage/tree/responsive-loader-issue-51

Related issue: https://github.com/herrstucki/responsive-loader/issues/51


  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        include: config.paths.assets,
        use: 'eslint',
      },
      {
        enforce: 'pre',
        test: /\.(js|s?[ca]ss)$/,
        include: config.paths.assets,
        loader: 'import-glob',
      },
      {
        test: /\.scss$/,
        include: config.paths.assets,
        use: ExtractTextPlugin.extract({
          fallback: 'style',
          use: [
            { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
            { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
            { loader: 'sass', options: { sourceMap: config.enabled.sourceMaps } },
          ],
        }),
      },
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader'
      }
    ],
  },

How to integrate the responsive-loader?

In SCSS file:

.test {
  background: url(../images/orig.jpg?size=200) center no-repeat;
}

url(...) should be handled, but prior to this, responsive-loader should use the file url and parameters for generating a new image. Currently responsive-loader doesn't receive any parameters (empty), hence it will fallback to original image (-1600).

strarsis commented 6 years ago

Using keepQuery: true as option for resolve-url fixes the issue:

            { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps, keepQuery: true } },