依存関係に.vueファイルが含まれていると、vue-styleguidistエラーが発生する

Question

vue-styleguidistを使用してVueJSコンポーネントのドキュメントを生成しています。

これは通常、うまく動作しますが、この場合には、私はエラーを取得する：

./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 

VUE-styleguidist（styleguide.config.js）のための私の設定ファイル読み込みのWebPACKファイルのデフォルトのルールが含まれています

const loaders = require('vue-webpack-loaders'); 

module.exports = { 
    ... 
    webpackConfig: { 
    module: { 
     loaders, 
    }, 
    ... 
    }, 
    ... 
}; 

その他の.vueファイルは正しく読み込まれますが、Icon.vueでは正しく読み込まれません。

Answer 1

問題は、vue-webpack-loadersによって提供されるデフォルトのwebpackローディングルールは、特にmode_modulesディレクトリを除外しますが、npmモジュールにはそのVueファイルIcon.vueが含まれているという点です。

{ 
    test: /\.vue$/, 
    exclude: /node_modules/, 
    loader: 'vue-loader', 
    options: vueLoaderConfig 
}, 

解決策は、特別なルールをデフォルトルールに追加して、特にそのファイルを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 
})