Webpack: Wie schließe ich die CSS eines Knotenmoduls ein?

Question

Ich benutze vue-cli, um eine Vue.js + Webpack App zu scaften und bin verwirrt, wie man als einfaches Beispiel so etwas wie Zurb Foundation miteinschließt.

Ich habe installiert erforderliche Abhängigkeiten und Lader wie sass-loader und css-loader aber bin nur verwirrt auf einer grundlegenden Ebene zu verstehen, wie man Webpack konfigurieren können kompilieren und umfasst beispielsweise node_modules/foundation-sites/scss/foundation.scss

In meinem webpack Config ich habe:

module: { 
    loaders: [ 
    { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"], 
     include: projectRoot 
    } ... 

In meiner Grund App.vue Komponente ich habe:

<style src="./scss/app.scss" lang="scss"></style> 

Und in meinem app.scss Ich habe versucht, ohne Erfolg:

@import '~foundation-sites/scss/foundation.scss'; 

(unter vielen anderen syntaktisch fehlerhaften Versuchen, die Fehler warf)

Ich glaube, ich bin etwas Grundsätzliches über die Art und Weise fehlt Webpack arbeitet mit NPM oder Bower-Pakete. Jede Richtung würde sehr geschätzt werden, da dies ein einfaches Problem ohne eine klare Antwort zu sein scheint, die ich finden kann.

Das Kopieren der erforderlichen Dateien von node_modules scheint eine unlogische oder nicht so ideale Lösung zu sein.

Answer 1

Ich habe nichts zu meiner Webpack-Konfiguration geändert. Ich habe es so gemacht:

Hinweis: Die Komponenten meines Projekts befinden sich in einem Ordner "src/components" und meine app.scss direkt im Ordner "src". Ich benutze Foundation-Sites v6.2.2 und vue-cli 2.2.0.

In einer Basiskomponente habe ich dies:

<style src="../app.scss" lang="scss"></style> 

Jetzt in diesem app.scss klebte ich alles von node_modules/Grund sites/SCSS/Einstellungen/_settings.scss Anpassung zu ermöglichen. Sie müssen eine Zeile dort ändern:

@import 'util/util';

sollte werden:

@import '~foundation-sites/scss/util/util';

schließlich zwei Linien am unteren Rand Ihres app.scss hinzu:

@import '~foundation-sites/scss/foundation.scss'; 
@include foundation-everything; 

Dies sollte Ihre CSS abdecken.

Allerdings werden Sie wahrscheinlich auch etwas über Javascript tun müssen, da die JavaScript-Komponenten von Foundation einige Initialisierung benötigen. Ich habe das selbst noch nicht gemacht, aber das könnte hilfreich sein: http://forum.vuejs.org/topic/893/vue-js-foundation-6/6