Webpack aliases does not work in Vue Styleguidist

Question

I am using Vue Styleguidist in a Nuxt.js project. Based on the Styleguidist and Webapack documents, I have configured my styleguide.config.js file and set some aliases:

module.exports = {
 ...

   webpackConfig: {
        resolve: {
            alias: {
                '~icons': path.resolve(__dirname, 'components/icons/'),
            },
        },

        module: {
            rules: [
                {
                    test: /\.vue$/,
                    exclude: /node_modules/,
                    loader: 'vue-loader',
                },
                {
                    test: /\.js?$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                },
                {
                    test: /\.(css?|scss|sass)(\?.*)?$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader',
                    ],
                },
            ],
        },
        plugins: [
            new VueLoaderPlugin(),
        ],
   } 

};

The components are using this alias like this:

import FooIcon from '~icons/foo';

Although the Styleguide cannot resolve the address. I believe the alias in the styleguide.config.js is somehow being ignored.

Does anyone know how should I work around this problem?