Vue.js 中的 CSS 框架
Posted
技术标签:
【中文标题】Vue.js 中的 CSS 框架【英文标题】：CSS frameworks in Vue.js 【发布时间】：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
是的，我看到了，没有使用缩进或任何东西。 @比尔克里斯韦尔。我想当前的问题是单独的问题。我会接受以上是关于Vue.js 中的 CSS 框架的主要内容，如果未能解决你的问题，请参考以下文章