尝试调用bulma时在Vue中出错。sass文件

Question

第一次在这里问问题，如果这是错误的，我道歉-我会好起来的！

我跟着一个Vue。我试图通过“@import”../node_modules/Bulma/Bulma.sass”文件安装并调用Bulma。

我可以查看我的vue“主页”，但一旦我将“lang=sass”添加到我的样式标记中，我就会不断收到以下错误：

"编译失败。

./节点\模块/css加载器？{“sourceMap”：true}/节点\模块/vue加载程序/lib/style编译器？{“vue”：true，“id”：“data-v-7ba5bd90”，“scoped”：false，“hasInlineConfig”：false}/节点单元模块/sass加载器/dist/cjs。js？{“indentedSyntax”：true，“sourceMap”：true}/节点_模块/vue加载程序/lib/selector。js？类型=样式

这是我的“app.vue”页面的代码：

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang="sass">
@import '../node_modules/bulma/bulma.sass'

#app
  font-family: "Avenir", Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  color: #2c3e50
  margin-top: 60px
</style>

如果我删除“样式”标签，页面会正确加载和显示，但是我在styles.scss页面上所做的任何更改显然不会生效，因为我相信我没有调用SASS语言。

我目前正在运行节点v 14.15.4和npm v 6.14.10。我已经尝试了我能看到的一切，从调整package.json等等。我联系不上教程的创作者，我真的想不出我的生活还能做什么。我将感谢任何帮助。

Answer 1

如果您在mac上使用vuejs时遇到sass加载程序问题。。。

我试着遵循这个指南：https://vue-loader.vuejs.org/guide/pre-processors.html-存在无法兼容的网页包问题

看到他们在mac上支持不同版本的节点，所以像这样修复它

• 使用n包将节点删除到版本15n 15
• 已安装sass加载程序v10.0。5npm安装-D sass-loader@10.0.5节点sass
• 检查

这可能会随着新版本的包变得可用而改变。

**可能有更好的方法来更改节点版本（请评论）

Answer 2

Vue CLI使用现成的CSS支持设置您的项目，但需要Sass的额外步骤。看起来您仍然需要安装sass预处理器：

npm安装-D sass加载程序sass

更多信息请看这里：https://cli.vuejs.org/guide/css.html#pre-processors