Vue.js中的CSS框架

Question

我想将Bulma集成到我的Vue.js项目中.

我之前已经包含了CDN脚本标签到我的<head>.

然而,之后,我按照这些官方说明包含Sass预处理器,因为Bulma在Node项目中需要它.

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

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

现在,脚本标记<head>正在被注释掉,我无法弄清楚如何将Bulma正确加载到我的应用程序中.

我已根据@BillCriswell建议在我的根组件样式标签中导入Bulma,如下所示:

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

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

并且样式表已正确加载,但是如果我进一步建议添加另一个样式标记,则不会加载样式.

如何将Bulma加载到我的Vue.js项目中,以及将CSS框架集成到Vue.js的推荐方法是什么？

Answer 1

你应该能够做到这一点,因为bulba的main入口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>

没有必要import bulma from 'bulma'在你的<script>.

如果您不能只使用样式标记,那将取决于您的webpack配置.如果你正在使用vue-cliwebpack模板,我相信你应该很好.