vue-styleguidist error when dependency contains a .vue file - vuejs2

Question

I'm generating documentation for a VueJS component using vue-styleguidist.
This normally works just fine, but in this case I get an error:
./node_modules/vue-awesome/components/Icon.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
<template>
<svg version="1.1"
:class="klass"
Learn how to add webpack loaders to your style guide:
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Webpack.md
My config file for vue-styleguidist (styleguide.config.js) includes the default rules for loading webpack files:
const loaders = require('vue-webpack-loaders');
module.exports = {
...
webpackConfig: {
module: {
loaders,
},
...
},
...
};
Other .vue files are loaded correctly, but not Icon.vue.

Answer 1

The problem is that the default webpack loading rule provided by vue-webpack-loaders specifically excludes mode_modules directory, but the npm module contains that Vue file Icon.vue.
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
options: vueLoaderConfig
},
The solution is to add an extra rule to the default rules to specifically load that file under node_modules.
const loaders = require('vue-webpack-loaders');
var vueLoaderConfig = require('vue-webpack-loaders/lib/vue-loader.conf')
loaders.push({
test: /vue-awesome\/components\/Icon\.vue$/, <-- path to .vue file
loader: 'vue-loader',
options: vueLoaderConfig
})