Webpack error for vue.js webpack template when using sass

Question

I'm newbie in Vue.js and webpack and I don't know if it's issue with packages or my mistake

Steps to reproduce:

Create new vue project from webpack template

~ vue init webpack sass-test
? Project name sass-test
? Project description A Vue.js project
? Author dvec <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
~ cd sass-test

Install packages (according to documentation)

~ npm install -D sass-loader sass

Edit src/components/HelloWorld.vue (according to documentation)

Old: <style scoped>
New: <style lang="scss" scoped>

Run

~ npm run dev

Receive error log:

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                               03:45:32

 error  in ./src/components/HelloWorld.vue

Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:121:11)
    at Object.join (path.js:1039:7)
    at getSassOptions (/private/tmp/sass-test/node_modules/sass-loader/dist/utils.js:160:37)
    at Object.loader (/private/tmp/sass-test/node_modules/sass-loader/dist/index.js:36:49)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-375 13:3-17:5 14:22-383
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

What I've tried:

Reinstalling vue-cli
Changing sass to less (same steps to reproduce, different error)
Adding rule to webpack.conf (docs)
Adding style resource in vue.config.js (docs)
Adding .concat with parameters to utils.js (docs)

I admit it may be a platform dependent error. Steps above was tested on macOS Catalina 10.15.6. Reply if you can't reproduce this error

If you're new to Vue (and Webpack), I strongly suggest you use version 4 of the CLI ~ cli.vuejs.org. In fact, you appear to be using the latest guide but vue init webpack sass-test is definitely v2. You'll want to uninstall vue-cli and install @vue/cli — Phil
– Phil, Commented Aug 27, 2020 at 1:06
If you're following a guide that said to install vue-cli, find a newer guide. The official docs are probably the best starting point — Phil
– Phil, Commented Aug 27, 2020 at 1:21

Victor Fernando Gil Calderon · Accepted Answer · 2020-12-31 04:12:59Z

1

Install this dependencies

"dependencies": {
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6",
    "nuxt-buefy": "^0.4.3"
  },
  "devDependencies": {
    "node-sass": "^5.0.0",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.1.0",
    "sass-loader": "^10.1.0"
  }

And you index.vue

<template lang="pug">
  section.hero.is-fullheight
    .hero-body
      .column.is-12-desktop.is-12-mobile
        .columns.is-multiline.is-mobile.is-centered.is-vcentered
          p.celular Hola
</template>

<script>
export default {
  name: 'Inicio',
}
</script>

<style lang="sass" scoped>
.celular
  background: black
</style>

answered Dec 31, 2020 at 4:12

Victor Fernando Gil Calderon

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack error for vue.js webpack template when using sass

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related