I am new to Vue.js and webpack, and I'm not sure if the issue lies with the packages or my own mistake.
Steps to replicate the problem:
- Create a new Vue project using the webpack template
~ vue init webpack sass-test
? Project name sass-test
? Project description A Vue.js project
? Author dvec <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f195879492949f95b1969c90989ddf929e9e">[email protected]</a>>
? 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 the required packages (as per the documentation)
~ npm install -D sass-loader sass
- Edit src/components/HelloWorld.vue (following the documentation)
Old: <style scoped>
New: <style lang="scss" scoped>
- Run the project
~ npm run dev
- See 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 have attempted to resolve this issue:
- Reinstalling vue-cli
- Switching from SASS to LESS (same steps followed, different error)
- Adding a rule to webpack.conf (docs)
- Adding style resource in vue.config.js (docs)
- Using .concat with parameters in utils.js (docs)
This issue may be platform-specific. The steps mentioned above were tested on macOS Catalina 10.15.6. Please let me know if you encounter the same error.