How to gzip, fingerprint and import assets in SCSS files?

[meysius]

I have a set of fonts to which I need to point using url mixin in scss files.
Also I need all fonts to be gzipped and fingerprinted.

What I have so far is:

const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config');
const CompressionPlugin = require('compression-webpack-plugin')
const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages(withSass(withCss({
  webpack(config) {
    config = commonsChunkConfig(config, /\.(sass|scss|css)$/);
    config.plugins.slice(-1)[0].filename = 'static/style-[contenthash].css';
    config.plugins.push(new CompressionPlugin({
      test: /\.(css|js|svg|ttf|eot)$/,
      minRatio: 100000
    }));
    return config;
  }
})))

Problem:

1 - How to fingerprint and GZIP compress fonts?

2 - How should fonts and images be addressed in SCSS files (while url points to the correct fingerprint)

.class {
  background: url( ???? )
}

[timneutkens]

1. you can add a custom server

2. not sure what you're asking

3. This shouldn't be posted here as per the issue template questions should be posted on https://spectrum.chat/next-js