Webpack: Bir düğüm modülünün css'sine nasıl eklenir?

Question

Bir Vue.js + WebPack uygulamasını darağacına vue-cli kullanarak ve temel bir örnek olarak, Zurb Foundation gibi bir şey dahildir nasıl, karıştı duyuyorum.

ben gerekli bağımlılıkları ve sass-loader ve css-loader olarak yükleyici yüklü ama bir örneğin WebPack derlemek ve içerecek şekilde yapılandırabilirsiniz nasıl anlamanın temel düzeyde sadece karıştı var node_modules/foundation-sites/scss/foundation.scss benim webpack konfigürasyonunda

Ben: benim temel App.vue bileşeninde

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

Ben:

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

Ve app.scss ben boşuna, çalıştık:

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

ben WebPack çalışma şekliyle ilgili temel bir şey eksik inanıyoruz

(diğer birçok sözdizimsel yanlış hataları attı girişimleri arasında) npm veya bower paketleri. Herhangi bir yön, büyük bir memnuniyetle karşılanacaktır, çünkü bu, bulabileceğim açık bir cevap olmadan basit bir problem gibi görünüyor. node_modules gelen

Gerekli dosyalar kopyalanıyor üzerinde de mantıksız bir ya da değil yani ideal çözüm gibi görünüyor.

Answer 1

benim WebPack config şey değişmedi. Böyle yaptım:

Not: my projenin bileşenleri src klasöründe doğrudan 'src/bileşenlerin klasörüne ve benim app.scss içindedir. Ben v6.2.2 ve vue-cli 2.2.0 temel siteleri kullanıyorum. özelleştirme sağlamak için

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

Şimdi bu app.scss I node_modules her şeyi yapıştırılan/vakıf-siteler/SCSS/ayarlar/_settings.scss: bir taban bileşeninde

bu var. Orada bir satır değiştirmek zorunda kalacak:

@import 'util/util';

haline gelmelidir:

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

:

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

Nihayet app.scss en alt kısmında iki satırı ekleyin

Bu, css'nizi kapsamalıdır. büyük olasılıkla Vakfın javascript bileşenler bazı başlatma gerektirmez, çünkü çok javascript hakkında bir şeyler yapmanız gerekir Ancak

. -Ben de bunu henüz yapmadıysanız, ancak bu yararlı olabilir: http://forum.vuejs.org/topic/893/vue-js-foundation-6/6