Vue.js의 CSS 프레임 워크

Bulma을 내 Vue.js 프로젝트에 통합하고 싶습니다.Vue.js의 CSS 프레임 워크

나는 이전에 내 <head>에 CDN 스크립트 태그를 포함 시켰습니다.

그러나 Bulma가 Node 프로젝트에서 요구하는대로 Sass 전 처리기를 포함하는 데이어서 these official instructions을 따라갔습니다.

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

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

이제 <head>에서 스크립트 태그는 주석되고, 나는 내 응용 프로그램에 제대로 부르마를로드하는 방법을 알아낼 수 없습니다.

아래 @BillCriswell에 의해 제안 다음과 같이 나는 나의 루트 구성 요소 스타일 태그에 부르마를 가져온 :

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

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

그리고 스타일이 제대로 나는 같은 추가 제안 다른 스타일의 태그를 추가하지만 경우,로드되면, 스타일이로드되지 않습니다.

Bulma를 내 Vue.js 프로젝트에로드하려면 어떻게해야하며 CSS 프레임 워크를 Vue.js에 통합하기 위해 권장되는 방법은 무엇입니까?

2017-01-31 softcode

bulba's main entry in package.json은 bulma.sass을 가리 키기 때문에이를 수행 할 수 있어야합니다.

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

하거나

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

당신의 <script>에 import bulma from 'bulma'을 할 필요가 없다 할 수 있습니다.

스타일 태그를 사용할 수 없다면 webpack 구성에 따라 달라집니다. vue-cli 웹팩 템플릿을 사용하고 있다면 나는 당신이 잘되어야한다고 생각합니다.

2017-01-31 20:21:33

답장을 보내 주셔서 감사합니다. @BillCriswell. 실제로 스타일 시트를 적절히 임포트하는 것처럼 보이지만,'style' 태그 안에 쓰는 SASS는로드되지 않습니다. – softcode

아래에 다른 스타일 태그를 만듭니다. '

답변