Vue.js içinde CSS çerçeveleri

Bulma'u Vue.js projeme entegre etmek istiyorum.Vue.js içinde CSS çerçeveleri

Daha önce CDN komut dosyası etiketini <head> numaralı telefonuma ekledim. Bununla birlikte, bundan sonra, Sma ön işlemciyi dahil etmek için these official instructions'u takip ettim, çünkü Bulma bir Düğüm projesinde bunu gerektirir.

npm install sass-loader node-sass --save-dev 

<style lang="sass"> 
/*write sass here */ 
</style>

Şimdi <head> komut dosyası etiketi dışarı yorumları yapılıyor ve benim uygulamasına düzgün Bulma yüklemek anlamaya olamaz.

aşağıda @BillCriswell önerdiği gibi aşağıdaki gibi benim kök bileşeni tarzı etiketleri Bulma ithal var:

<style lang="scss" src="bulma"></style> 

<style lang="scss"> 
    body { 
    text-align:center; 
    background-color:blue; 
    } 
</style>

Ve stil düzgün ben daha da ileri başka bir stil etiketi ekler, ancak eğer yüklenir, stiller yüklenmiyor.

Bulma'yı Vue.js projeme nasıl yüklerim ve bir CSS çerçevesinin Vue.js'ye tümleştirilmesi için önerilen yaklaşım nedir?

kaynak

2017-01-31 softcode

Bunu bulba's main entry in package.json'dan beri bulma.sass yapabilmeniz gerekir.

<style lang="sass" src="bulma"></style> 
<style> 
    /* Your css for this file... */ 
</style>

veya

<style lang="sass"> 
    @import "bulma" 
    /* Your css for this file... */ 
</style>

sizin <script> yılında import bulma from 'bulma' yapmaya gerek yoktur yapabilirsiniz.

Stil etiketini kullanamazsanız, webpack yapılandırmanıza bağlı olacaktır. vue-cli webpack şablonunu kullanıyorsanız, iyi olmanız gerektiğine inanıyorum.

kaynak

2017-01-31 20:21:33

@BillCriswell yanıtı için teşekkürler. Gerçekten de stil sayfasını düzgün bir şekilde içe aktarıyor gibi görünüyor, ancak bu stilin içindeki SASS I yazımları yüklenmiyor. – softcode

Altında başka bir stil etiketi oluşturun. İstediğiniz kadar

Vue.js içinde CSS çerçeveleri

cevap