CODEWITHSUNDEEP
javascriptvue.jswebpacksassvue-cli
dvec
dvec

Reputation: 347

Webpack error for vue.js webpack template when using sass

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:

  1. 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
  1. Install packages (according to documentation)
~ npm install -D sass-loader sass
  1. Edit src/components/HelloWorld.vue (according to documentation)
Old: <style scoped>
New: <style lang="scss" scoped>
  1. Run
~ npm run dev
  1. 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:

  1. Reinstalling vue-cli
  2. Changing sass to less (same steps to reproduce, different error)
  3. Adding rule to webpack.conf (docs)
  4. Adding style resource in vue.config.js (docs)
  5. 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

Upvotes: 0

Views: 1528

Answers (1)

Victor Fernando Gil Calderon
Victor Fernando Gil Calderon

Reputation: 11

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>

Upvotes: 1

Related Questions