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

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

下面是Vue.js教程，我试图通过“@import”../node_modules/Bulma/Bulma.sass”文件安装并调用Bulma

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

“编译失败

./node_模块/css加载程序？{“sourceMap”：true}/node_modules/vue loader/lib/style编译器？{“vue”：true，“id”：“data-v-7ba5bd90”，“scoped”：false，“hasInlineConfig”：false}/node_modules/sass loader/dist/cjs.js？{“indentedSyntax”：true，“sourceMap”：true}/node_modules/vue loader/lib/selector.js？type=styles&index=0/src/App.vue 模块生成失败：TypeError:this.getOptions不是函数 在Object.loader（/Users/Dave/compare vue/node_modules/sass loader/dist/index.js:25:24） @ ./node_模块/vue样式加载器/节点\模块/css加载程序？{“sourceMap”：true}/node_modules/vue loader/lib/style编译器？{“vue”：true，“id”：“data-v-7ba5bd90”，“scoped”：false，“hasInlineConfig”：false}/node_modules/sass loader/dist/cjs.js？{“indentedSyntax”：true，“sourceMap”：true}/node_modules/vue loader/lib/selector.js？type=styles&index=0/src/App.vue 4:14-384 13:3-17:5 14:22-392@./src/App.vue@./src/main.js@multi（webpack）-开发服务器/客户端？http://localhost:8080 webpack/hot/dev server./src/main.js“

以下是我的“app.vue”页面中的代码：

导出默认值{
名称：“应用程序”，
};
@导入“../node_modules/bulma/bulma.sass”
#应用程序
字体系列：“Avenir”、Helvetica、Arial、无衬线
-webkit字体平滑：抗锯齿
-moz osx字体平滑：灰度
文本对齐：居中
颜色：#2c3e50
利润上限：60像素

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

---

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

Vue CLI使用CSS支持开箱即用地设置您的项目，但需要uires是Sass的额外步骤。看起来您仍然需要安装Sass预处理器：

npm安装-D sass加载程序sass

查看此处了解更多信息：

---

不要将其导入为

。/node\u modules/bulma/bulma.scss

尝试使用包名导入，假设包名为

bulma

，然后将其导入为

@bulma/bulma.scss

我也尝试了这个，但仍然得到相同的错误。我只是尝试了这个，它什么都没有做。仍然有相同的错误。我只是尝试安装通过Sass站点，获取目录已经存在的错误。由于某些原因，它在那里，但是当我通过样式标记调用它时，我遇到了错误。您是否尝试过使用

lang='scss'

？另外，请确保您的网页包配置正确：添加lang='scss'标记会更改代码的格式，但不会更改结果。具体位置如下：在vue安装添加的所有文件中，我都看到了大量的webpack配置。在我的/node_modules/sass loader/dist/index.js文件夹中出现错误，然后查看js行，它说“*sass loader使节点sass和dart sass可用于webpack模块。“@this{object}”“@param{string}content。”我认为这是一个网页包问题，但我已尝试干净地删除和安装网页包，并尝试解决版本之间的任何冲突问题。还是不走运。

<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>