2017-04-11 1 views
0

Hallo schöne Leute,Webpack 2 kompiliert nicht css in vue Dateien

Ich habe ein Problem mit der Kompilierung CSS für Vue-Komponenten. Hier ist meine Konfigurationsdatei: https://gist.github.com/lavezzi1/27817a17cb4fa2a092e701089ecae0ec

Ich mache mehrere Seite App mit Vue. Alles funktioniert gut außer einer Sache: Wenn ich zwei Seiten habe, und wenn sie beide haben modal importiert import Modal from 'components/modal.vue' alles funktioniert gut, aber wenn man nicht dann die Ausgabe. CSS-Datei hat keine CSS-Code für Modal. Wie kann ich das beheben?

Meine vue Komponenten wie folgt aussehen:

<template> 
... 
</template> 

<script> 
... 
</script> 

<style lang="css"> 
    css here 
</style> 

Sie für jede Hilfe danken!

+0

sind der CSS-Code inline in dem letzten JS Bündel hinzugefügt? –

+0

@DaniAkash nein, ich habe nichts in Ausgabe js Bundle für die Seite, die Modal importiert. Nur js, eigentlich funktioniert es aber ohne CSS. – Hola

+0

fügen Sie das CSS zu Ihrem 'main.js' wie 'require ('path/to/css')' hinzu oder verwenden Sie 'style scoped' in der modalen Komponente. –

Antwort

1

Sie sollten Ihren vue-loader mit Optionen zum Kompilieren von CSS erweitern.

Zum Beispiel:

{ 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: { 
     loaders: { 
     css: ExtractTextPlugin.extract({ 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { 
       minimize: condition 
       } 
      } 
      ], 
      fallback: 'vue-style-loader' 
     }) 
     } 
    } 
    } 
0

Webpack benötigt vue-loader, um mit Vue-Komponenten zu arbeiten.

+0

Haben Sie meine Konfiguration überhaupt gesehen? Es tut vue-loader, ist das nicht? – Hola

+0

Ich sah gerade 'vue-style-loader', meine Schuld ;-) –

+0

es hat auch vue-loader – Hola