others-how to solve 'Module build failed: Error: ENOENT: no such file or directory' when running a webpack project in vscode by using npm run dev?

May 7, 2021

1. Purpose

In this post, I would demo how to solve the below error when we running npm run dev in a vue.js project:

➜  vue-admin git:(master) ✗ npm run dev            

> [email protected] dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 15% building modules 42/85 modules 43 active ...wen/js-projects/vue-admin/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 94% asset optimization                                                                 

 ERROR  Failed to compile with 10 errors                                                                                             2:32:56 PM

 error  in ./src/style/index.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./src/style/index.scss 4:14-201 13:3-17:5 14:22-209
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/login/index.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-37dfd6fc","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/views/login/index.vue 4:14-383 13:3-17:5 14:22-391
 @ ./src/views/login/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/style/sidebar.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./src/style/sidebar.scss 4:14-203 13:3-17:5 14:22-211
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/Layout/components/Sidebar/SidebarItem.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5564c0ff","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/Layout/components/Sidebar/SidebarItem.vue 4:14-401 13:3-17:5 14:22-409
 @ ./src/Layout/components/Sidebar/SidebarItem.vue
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/dashboard/index.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-106c86ed","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/views/dashboard/index.vue 4:14-383 13:3-17:5 14:22-391
 @ ./src/views/dashboard/index.vue
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/configManage/backup.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5576c260","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/views/configManage/backup.vue 4:14-384 13:3-17:5 14:22-392
 @ ./src/views/configManage/backup.vue
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/configManage/cluster.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-558d6568","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/views/configManage/cluster.vue 4:14-385 13:3-17:5 14:22-393
 @ ./src/views/configManage/cluster.vue
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/user/routerManage.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-27a78e28","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/views/user/routerManage.vue 4:14-390 13:3-17:5 14:22-398
 @ ./src/views/user/routerManage.vue
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/user/roleManage.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f75a48d6","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/views/user/roleManage.vue 4:14-388 13:3-17:5 14:22-396
 @ ./src/views/user/roleManage.vue
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/user/userManage.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3db9e0aa","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/views/user/userManage.vue 4:14-388 13:3-17:5 14:22-396
 @ ./src/views/user/userManage.vue
 @ ./src ^\.\/.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

2. Environment

Mac OS 10.15
Visual Source Code
npm 7.11.2

3. The solution

3.1 What does this error mean?

The key error line is:

Module build failed: Error: ENOENT: no such file or directory

Look at the following directory.

scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'

There is a problem with the vendor under node-sass under node_modules in my local node_modules directory. So, we should generate the node-sass/vendor directory.

3.2 Rebuild the node-sass/vendor directory

We rebuild the directory like this: (execute the command in the root of your project)

 $ npm rebuild node-sass

What does the above command mean?

Before we dive into node-sass, we should know what is sass, according to this article, the sass is:

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Sass contains two syntaxes. The older syntax uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS, uses block formatting like CSS. It uses braces to denote code blocks and semicolons to separate lines within a block.

The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

In short, sass is a script for css. Then what is node-sass?

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows us to natively compile SCSS files to CSS

In short, node-sass is a compiler for scss, it can compile it to css.

So , node-sass is just a library(package), we can rebuild it if it has some problems:

What happens when running npm rebuild xxx?

This command runs the npm build command on the matched folders. This is useful when you install a new version of node, and must recompile all your C++ addons with the new binary. It is also useful when installing with --ignore-scripts and --no-bin-links, to explicitly choose which packages to build and/or link bins.

If one or more package names (and optionally version ranges) are provided, then only packages with a name and version matching one of the specifiers will be rebuilt.

What’s the difference between npm build and npm rebuild?

npm install: It is obvious that npm install is used to install packages using the package.json file, this command also installs the other packages on which the packages (in package.json) are dependent. On the backside, this command uses the npm build which helps to build the packages you are installing.

npm rebuild: As the name rebuild, this command again builds the packages, used only when you upgrade the node version and must recompile all your C++ addons with the new binary.

by Gaurav Paliwal

3.3 ReRun the app

Now we can re-run our app like this:

 ➜  vue-admin git:(master) ✗ npm run dev      

> [email protected] dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 14% building modules 39/85 modules 46 active ...wen/js-projects/vue-admin/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                           

 DONE  Compiled successfully in 10586ms                                                                                                14:51:16

 I  Your application is running here: http://localhost:8080

Now it works!

4. Summary

In this post, I demonstrated how to solve ‘Module build failed: Error: ENOENT: no such file or directory’ error when using npm run dev to run a webpack js project.