Error in Vue when trying to call bulma.sass file

Question

first time asking a question here, so I apologize if this is incorrect - I'll get better!

I'm following along with a Vue.js tutorial, and am trying to install and call Bulma via an "@import '../node_modules/bulma/bulma.sass' file.

I'm able to view my vue "home" page, but once I add a "lang=sass" to my style tag, I keep getting the following error:

"Failed to compile.

./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 Module build failed: TypeError: this.getOptions is not a function at 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"

Here is the code from my "app.vue" page:

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

If I remove the "style" tag, the page loads and displays correctly, but then any changes I make on my styles.scss page obviously don't take effect as I belive I haven't called the SASS language.

I'm currently running node v 14.15.4 and npm v 6.14.10. I've tried everything I can see, from adjusting the package.json, etc. I can't contact the creator of the tutorial, and I really can't figure out anything else to do for the life of me. I would appreciate any help.

Instead of importing it as ../node_modules/bulma/bulma.scss try importing using the package name, suppose the package name is bulma then import it as @bulma/bulma.scss — Yash Maheshwari

Mike Mike · Accepted Answer · 2021-02-16T16:35:06

Vue-CLI sets up your project with CSS support out of the box, but requires an extra step for Sass. Looks like you still need to install the sass preprocessor:

npm install -D sass-loader sass

Look here for more info: https://cli.vuejs.org/guide/css.html#pre-processors

Error in Vue when trying to call bulma.sass file

1 Answers