Webpack - steps to implement aliases inside CSS

Question

Webpack allows us to create resolve aliases and use it further inside of our CSS code etc.

resolve: {
    extensions: ['.js', '.vue', '.json', '.scss', '.css'],
    alias: {
      'fonts': path.join(__dirname, 'assets/fonts'),
      'images': path.join(__dirname, 'assets/images')
    }
  }

My question is, what are the following steps to implement aliases and use it inside LESS/SCSS ??:

1. Images: background-image: url(~imagesalias/images/image.png);
2. Fonts: src: url('~fontalias/fonts/font.ttf') format('truetype');

My current CSS/SCSS loader for DEV purposes:

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "resolve-url-loader"
        }]
      },
      {
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "resolve-url-loader"
        }, {
          loader: "sass-loader"
        }]
      }
    ]
  }

Answer 1

I think your issue is that you are not accessing your path right.

If your webpack resolve paths are:

alias: {
  'fonts': path.join(__dirname, 'assets/fonts'),
  'images': path.join(__dirname, 'assets/images')
}

Then in order to access it in css or scss it should be:

background-image: url(~images/image.png);
src: url('~fonts/font.ttf') format('truetype');