vue-styleguidist Fehler, wenn die Abhängigkeit eine .vue-Datei enthält

Question

Ich erstelle Dokumentation für eine VueJS-Komponente mit vue-styleguidist.

Dies funktioniert in der Regel ganz gut, aber in diesem Fall bekomme ich einen Fehler:

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

Meine Konfigurationsdatei für vue-styleguidist (styleguide.config.js) enthält die Standardregeln für das Laden webpack Dateien:

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

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

Andere .vue-Dateien werden korrekt geladen, aber nicht Icon.vue.

Answer 1

Das Problem ist, dass die standardmäßige Webpack-Lade-Regel von vue-webpack-loadern das modus_modules-Verzeichnis explizit ausschließt, aber das npm-Modul diese Vue-Datei Icon.vue enthält.

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

Die Lösung besteht darin, den Standardregeln eine zusätzliche Regel hinzuzufügen, um diese Datei spezifisch unter node_modules zu laden.

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 
})