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

Posted 2023-02-22

【中文标题】尝试调用 bulma.sass 文件时 Vue 出错

【英文标题】：Error in Vue when trying to call bulma.sass file

【发布时间】：2021-05-19 12:34:01

【问题描述】：

第一次在这里提问，如有不妥，我深表歉意——我会变得更好！

我正在学习 Vue.js 教程，并尝试通过“@import '../node_modules/bulma/bulma.sass' 文件安装和调用 Bulma。

我可以查看我的 vue“主页”页面，但是在我的样式标签中添加“lang=sass”后，我不断收到以下错误：

"编译失败。

./node_modules/css-loader?"sourceMap":true!./node_modules/vue-loader/lib/style-compiler?"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_modules/vue-style-loader!./node_modules/css-loader?"sourceMap":true!./node_modules/vue-loader/lib/style-compiler?"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)-dev-server/client?http://localhost :8080 webpack/hot/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”标签，页面会正确加载和显示，但是我对我的 styles.scss 页面所做的任何更改显然都不会生效，因为我相信我没有调用 SASS 语言。

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

【问题讨论】：

不要将其导入为../node_modules/bulma/bulma.scss尝试使用包名导入，假设包名是bulma然后将其导入为@bulma/bulma.scss

我也试过了，还是一样的错误。

【参考方案1】：

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

npm install -D sass-loader sass

查看此处了解更多信息： https://cli.vuejs.org/guide/css.html#pre-processors

【讨论】：

我刚试过这个，它没有做任何事情。仍然有同样的错误。我只是尝试通过 Sass 站点安装，并得到目录已经存在的错误。出于某种原因，它在那里，但是当我通过样式标签调用它时，我遇到了错误。

你试过lang='scss'吗？另外，请确保您的 webpack 配置正确：vue-loader.vuejs.org/guide/pre-processors.html#sass

添加 lang='scss' 标签会改变代码的格式，但不会改变结果。那个“webpack config:”文件到底在哪里？我在 vue 安装添加的所有文件中都看到了很多 webpack 配置。

跟随错误到我的 /node_modules/sass-loader/dist/index.js 文件夹，然后查看 JS 行，它说“* sass-loader 使 node-sass 和 dart -sass 可用于 webpack 模块。“@this object”“@param string 内容。”我认为这是一个 webpack 问题，但我已经尝试彻底删除和安装 webpack 并尝试解决版本之间的任何冲突问题。仍然没有运气。

【参考方案2】：

如果您在 Mac 上使用 vuejs 的 sass-loader 遇到问题...

我尝试遵循本指南：https://vue-loader.vuejs.org/guide/pre-processors.html - 遇到不兼容的 webpack 包问题

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

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

这可能会随着新版本的软件包的推出而改变。

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