Resize from SCSS doesn't work

[albertpeiro]

I couldn't find anywhere a mention to this not working so I assumed this should work but please correct me if I'm wrong. Also THANK YOU for this library - it's awesome.

Resizing via url params works when I use it with require. It doesn't seem to work from scss files though.

Image size remains 2048 when opening it

&.cover-sailing {
    background-size: cover;
    background-position: center;
    background-image: url("../images/photos/albert-alghero-1.jpg?resize&size=500");
  }

const nextConfig = {
  webpack: (config) => {
    config.resolve.alias["~"] = path.resolve(__dirname);
    return config;
  }
};

module.exports = withPlugins(
  [
    [
      optimizedImages,
      {
        /* config for next-optimized-images */
        optimizeImagesInDev: true
      }
    ]

    // your other plugins here
  ],
  nextConfig
);

I'm on:

• Mac catalina 10.15.4
• Node v12.13.1
• NPM 6.12.1

"dependencies": {
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "date-fns": "^2.12.0",
    "greeting": "^1.0.6",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^7.1.0",
    "imagemin-svgo": "^7.1.0",
    "isomorphic-unfetch": "^3.0.0",
    "lqip-loader": "^2.2.0",
    "next": "^9.3.2",
    "next-compose-plugins": "^2.2.0",
    "next-optimized-images": "^2.5.8",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-bootstrap-icons": "^1.0.1-alpha3",
    "react-dom": "^16.13.1",
    "react-map-gl": "^5.2.3",
    "reactstrap": "^8.4.1",
    "responsive-loader": "^1.2.0",
    "sass": "^1.26.3",
    "sharp": "^0.25.2",
    "swr": "^0.1.18"
  },
  "devDependencies": {
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "typescript": "^3.8.3"
  }

[benedfit]

Same goes for ?webp. I'm unable to utilise the functionality via Sass files

[keadex]

Same for me for ?webp. Any update?

[nad182]

I also can neither resize background-image in filename.module.scss, nor convert it to webp. Any of

background-image: url('../public/images/hero-bg.png?webp');
background-image: url('../public/images/hero-bg.png?resize&size=500');

results in the full jpeg image (i.e. localhost:3000/_next/static/images/hero-bg-3ffba3cef92d0972f13f317d74e1bcab.png). This closed issue mentions that at least converting to webp should be possible. This is my next.config.js:

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const responsiveLoaderSharp = require('responsive-loader/sharp');

module.exports = withPlugins([
  [optimizedImages, {
    responsive: {
      adapter: responsiveLoaderSharp,
      sizes: [300, 320, 640, 960, 1200, 1800, 2400],
      placeholder: true,
      placeholderSize: 40,
    },
    optimizeImagesInDev: true,
  }],
]);