CODEWITHSUNDEEP
node.jsvue.js
Tomek Pulkiewicz
Tomek Pulkiewicz

Reputation: 79

Cannot add Sass to Vue project in Webpack 3

I just installed sass-loader and node-sass to my project via npm:

npm install -D node-sass sass-loader

Then replaced the style tag inside vue component to:

<style lang="scss"></style>

I get the following error:

 Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.join (path.js:432:7)
    at getSassOptions (C:\Users\tomek\Desktop\projekty\projectsBacketlist\noteTakingApp\frontend\noteTakkingApp\node_modules\sass-loader\dist\utils.js:160:37)
    at Object.loader (C:\Users\tomek\Desktop\projekty\projectsBacketlist\noteTakingApp\frontend\noteTakkingApp\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-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-357 13:3-17:5 14:22-365
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

What can I do to fix this issue?

Upvotes: 1

Views: 1984

Answers (1)

tony19
tony19

Reputation: 138656

The version of Webpack in your project (3.x) is old and incompatible with the newest versions of node-sass and sass-loader (5.x and 10.x, respectively).

For Sass in Webpack 3, install node-sass 4.x and sass-loader 7.x:

npm i -D node-sass@^4 sass-loader@^7

Upvotes: 5

Related Questions