Vue.js 中的 CSS 框架答案

【问题标题】：CSS frameworks in Vue.jsVue.js 中的 CSS 框架
【发布时间】：2017-06-17 09:58:32
【问题描述】：

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

我之前已将 CDN 脚本标签包含在我的 <head> 中。

但在那之后，我关注 these official instructions 以包含 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 的推荐方法是什么？

【问题讨论】：

【解决方案1】：

你应该可以这样做，因为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 webpack 模板，我相信你应该很好。

【讨论】：

感谢@BillCriswell 的回答。实际上，它似乎正确地导入了样式表，但是我在这些 style 标记中编写的任何 SASS 都没有被加载。
在其下创建另一个样式标签。您可以拥有任意数量的<style> 标签。或者，您可以只有一个样式标签和@import "bulma"。
@import "bulma" 使用 Module not found: Error: Cannot resolve 'file' or 'directory' ./bulma 使应用程序崩溃
啊，我很确定对我有用。我想你可能想去这里看看 sass-loader 警告：vue-loader.vuejs.org/en/configurations/pre-processors.html
是的，我看到了，没有使用缩进或任何东西。 @比尔克里斯韦尔。我想当前的问题是单独的问题。我会接受