Webpack: come posso includere il css di un modulo nodo?

Question

Sto usando vue-cli per impalcare un'app Vue.js + Webpack e sono confuso su come, come esempio di base, includere qualcosa come Zurb Foundation.

Ho installato le dipendenze e caricatori, come sass-loader e css-loader richiesti, ma sono solo confuso su un livello fondamentale di capire come si possa configurare Webpack per compilare ed includere, ad esempio node_modules/foundation-sites/scss/foundation.scss

Nel mio webpack config ho:

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

Nella mia base componente App.vue ho:

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

E nella mia app.scss mi hanno cercato, inutilmente:

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

(tra molti altri tentativi sintatticamente corretti che ha generato errori)

credo che mi manca qualcosa di fondamentale nel modo in cui funziona con Webpack pacchetti npm o bower. Qualsiasi direzione sarebbe molto apprezzata in quanto sembra essere un semplice problema senza una risposta chiara che riesco a trovare.

La copia dei file richiesti da node_modules sembra una soluzione illogica o non altrettanto ideale.

Answer 1

Non ho modificato nulla sulla configurazione del mio Webpack. L'ho fatto così:

Nota: i componenti del mio progetto sono in una cartella 'src/components' e il mio app.scss direttamente nella cartella src. Sto usando i siti di fondazione v6.2.2 e vue-cli 2.2.0.

In un componente di base ho questo:

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

Ora, in questo app.scss ho incollato tutto da node_modules/Fondazione siti/SCSS/impostazioni/_settings.scss per consentire la personalizzazione. Si dovrà cambiare una riga c'è:

@import 'util/util';

dovrebbe diventare:

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

Infine aggiungere due righe nella parte inferiore del vostro app.scss:

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

Questo dovrebbe coprire il tuo css.

Tuttavia è probabile che sia necessario fare qualcosa anche su javascript, perché i componenti javascript di Foundation richiedono un'inizializzazione. Non l'ho ancora fatto, ma potrebbe essere utile: http://forum.vuejs.org/topic/893/vue-js-foundation-6/6