当尝试调用bulma时，Vue中的错误.sass文件

Question

第一次在这里问问题，所以如果这是不正确的，我道歉-我会做得更好!

我正在跟随Vue.js教程，并试图通过"@import '../node_modules/Bulma/Bulma安装和调用Bulma。sass的文件。

我可以看到我的值"home"页面，但是一旦我添加了"lang=sass"对于我的样式标签，我一直得到以下错误:

"编译失败。

。/node_modules/css-loader ?{"sourceMap"真}!。/node_modules/vue-loader/lib/style-compiler ?{"vue"真的,"id":"data-v-7ba5bd90","scoped":假的,"hasInlineConfig":假}! . ./node_modules sass-loader/dist/cjs.js ?{"indentedSyntax"真的,"sourceMap":真正的}!。/node_modules/vue-loader/lib/selector.js ?类型= styles&指数= 0 !/src/App.vue模块构建失败:TypeError: this。getopoptions不是一个函数在对象。加载程序(/用户/戴夫/compare-vue/node_modules/sass-loader/dist/index.js:二五24)@/node_modules/vue-style-loader !。/node_modules/css-loader ?{"sourceMap"真}!。/node_modules/vue-loader/lib/style-compiler ?{"vue"真的,"id":"data-v-7ba5bd90","scoped":假的,"hasInlineConfig":假}! . ./node_modules sass-loader/dist/cjs.js ?{"indentedSyntax"真的,"sourceMap":真正的}!。/node_modules/vue-loader/lib/selector.js ?类型= styles&指数= 0 !/src/App.vue4:14-384 13:3-17:5 14:22-392 @ ./src/App。Vue @ ./src/main.js @multi (webpack)-dev-server/client?http://localhost:8080webpack/热/dev-server。/src/main.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>

如果我去掉"style"标记，页面加载并正确显示，但随后我对样式所做的任何更改。SASS页面显然不会生效，因为我相信我没有调用SASS语言。

我目前正在运行节点v 14.15.4和npm v 6.14.10。我已经试过了我能想到的一切，从调整包装。json等。我无法联系到教程的创造者，而且我真的不知道还能做些什么。我很感激你的帮助。

Answer 1

Vue-CLI为您的项目设置了开箱即用的CSS支持，但需要额外的Sass步骤。看起来你仍然需要安装sass预处理器:

npm install -D sass-loader sass

在这里查看更多信息:https://cli.vuejs.org/guide/css.html预处理程序

Answer 2

如果你在mac上使用vejs时遇到sass-loader问题…

我试着遵循这个指南:https://vue-loader.vuejs.org/guide/pre-processors.html -有不兼容的webpack包的问题

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

• 使用n包将节点删除到版本15n 15
• 已安装sass-loader v 10.0.5npm install -D sass-loader@10.0.5 node-sass
• 检查<script lang="scss">已添加到App.vue文件
• yarn serve现在按预期工作，并从sass
创建一个css文件

当新版本的包可用时，这可能会改变。

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