Angular 2+ custom webpack path issue

Question

I want to use @ngneat/tailwind that's it a schematics for change an angular project into a one with a custom webpack configuration.

After added that all my scss import paths about fonts or other partial scss aren't resolved, and i receive the error:

Error: Failed to find 'filename'

If in my angular.json i remove the custom webpack:

"customWebpackConfig": {
              "path": "webpack.config.js"
            }

all paths work great.

I have the default configuration of an Angular app version 11.

How i can resolve those paths?

I've tried with webpack resolve alias but don't work this:

const webpackMerge = require('webpack-merge');
const path = require('path');

console.error(path.resolve(__dirname, 'src/assets/ds/abstract/_variables.scss'));


module.exports = (config) => {
  const merge = webpackMerge && webpackMerge.merge ? webpackMerge.merge : webpackMerge;
  const isProd = config.mode === 'production';
  const tailwindConfig = require('./tailwind.config.js')(isProd);

  return merge(config, {
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: [
                require('postcss-import'),
                require('tailwindcss')(tailwindConfig),
                require('autoprefixer')
              ]
            }
          }
        }
      ]
    },
    resolve: {
      alias: {
        variables: path.resolve(__dirname, 'src/assets/ds/abstract/_variables.scss')
      },
      extensions: ['.ts', '.js', 'scss']
    }
  });
};

Answer 1

This was an issue. From the version 5.1.0 this work as well.