CSS-Frameworks in Vue.js

Ich möchte Bulma in mein Vue.js-Projekt integrieren.CSS-Frameworks in Vue.js

Ich habe zuvor das CDN-Skript-Tag in meine aufgenommen.

Allerdings folgte ich these official instructions für die Aufnahme von Sass Pre-Prozessor, wie Bulma erfordert es in einem Node-Projekt.

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

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

Nun wird der Script-Tag in <head> wird kommentiert, und ich kann nicht herausfinden, wie Bulma in meine Anwendung ordnungsgemäß geladen.

Ich habe Bulma in meinem Stammkomponente Style-Tags importiert, wie unten durch @BillCriswell vorgeschlagen, wie folgt:

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

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

Und das Stylesheet ordnungsgemäß geladen ist, aber wenn ich einen anderen Stil-Tag wie weiter vorgeschlagen hinzufügen, die Stile werden nicht geladen.

Wie lade ich Bulma in mein Vue.js-Projekt, und was ist der empfohlene Ansatz für die Integration eines CSS-Frameworks in Vue.js?

Quelle

2017-01-31 softcode

Sie sollten in der Lage sein, dies seit bulba's main entry in package.json Punkte auf bulma.sass zu tun.

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

oder Sie können

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

tun Es gibt keine Notwendigkeit import bulma from 'bulma' in Ihrem <script> zu tun.

Wenn Sie nicht einfach das style-Tag verwenden können, hängt es von Ihrer Webpack-Konfiguration ab. Wenn Sie die Webpack-Vorlage vue-cli verwenden, sollten Sie meiner Meinung nach gut sein.

Quelle

2017-01-31 20:21:33

Danke für die Antwort @BillCriswell. Tatsächlich scheint es das Stylesheet korrekt zu importieren, aber jedes SASS, das ich innerhalb dieser 'style' Tags schreibe, wird nicht geladen. – softcode

Erstellen Sie ein weiteres Style-Tag darunter. Sie können so viele '