node.js - 重复重新安装尝试后，npm run 找不到模块 'sass'

Question

对 npm run 的任何调用都会产生此错误:

$ npm run dev

> @ dev /project
> npm run development


> @ development /project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

/project/node_modules/webpack-cli/bin/cli.js:235
                throw err;
                ^

Error: Cannot find module 'sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at implementation (/project/node_modules/laravel-mix/src/components/Sass.js:52:39)
    at implementation (/project/node_modules/laravel-mix/src/components/Preprocessor.js:125:61)
    at global.tap (/project/node_modules/laravel-mix/src/helpers.js:10:5)
    at Sass.loaderOptions (/project/node_modules/laravel-mix/src/components/Preprocessor.js:123:9)
    at extractPlugin (/project/node_modules/laravel-mix/src/components/Preprocessor.js:87:39)
    at global.tap (/project/node_modules/laravel-mix/src/helpers.js:10:5)
    at details.forEach.preprocessor (/project/node_modules/laravel-mix/src/components/Preprocessor.js:27:13)
    at Array.forEach (<anonymous>)
    at Sass.webpackRules (/project/node_modules/laravel-mix/src/components/Preprocessor.js:22:22)
    at ComponentFactory.applyRules (/project/node_modules/laravel-mix/src/components/ComponentFactory.js:155:23)
    at Mix.listen.rules (/project/node_modules/laravel-mix/src/components/ComponentFactory.js:66:48)
    at events.(anonymous function).forEach.handler (/project/node_modules/laravel-mix/src/Dispatcher.js:34:47)
    at Array.forEach (<anonymous>)
    at Dispatcher.fire (/project/node_modules/laravel-mix/src/Dispatcher.js:34:28)
    at Mix.dispatch (/project/node_modules/laravel-mix/src/Mix.js:119:25)
    at WebpackConfig.buildRules (/project/node_modules/laravel-mix/src/builder/WebpackConfig.js:83:13)
    at WebpackConfig.build (/project/node_modules/laravel-mix/src/builder/WebpackConfig.js:23:14)
    at Object.<anonymous> (/project/node_modules/laravel-mix/setup/webpack.config.js:29:38)
    at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/project/node_modules/webpack-cli/bin/convert-argv.js:113:13)
    at requireConfig (/project/node_modules/webpack-cli/bin/convert-argv.js:115:6)
    at /project/node_modules/webpack-cli/bin/convert-argv.js:122:17
    at Array.forEach (<anonymous>)
    at module.exports (/project/node_modules/webpack-cli/bin/convert-argv.js:120:15)
    at yargs.parse (/project/node_modules/webpack-cli/bin/cli.js:232:39)
    at Object.parse (/project/node_modules/yargs/yargs.js:567:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这是我的 package.json:

{
"private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "accounting": "^0.4.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-sass": "^3.4.0",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "fancybox": "^3.0.1",
    "jquery": "^3.3.1",
    "jquery-slimscroll": "^1.3.8",
    "ladda": "^2.0.1",
    "laravel-mix": "^4.0.13",
    "locutus": "^2.0.10",
    "metismenu": "^2.7.9",
    "moment": "^2.23.0",
    "resolve-url-loader": "2.3.1",
    "sass-loader": "7.*",
    "style-loader": "^0.23.1",
    "vue": "^2.5.21",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.0"
  },
  "dependencies": {
    "ajv": "^6.6.2",
    "bootstrap-vue": "^2.0.0-rc.11",
    "bootstrap4c-chosen": "^1.0.13",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "imagemin": "^6.0.0",
    "jsonexport": "^2.4.1",
    "laravel-echo": "^1.5.2",
    "lodash": "^4.17.11",
    "node-sass": "^4.11.0",
    "pusher-js": "^4.3.1",
    "sweetalert2": "^7.32.4",
    "vue-api-query": "^1.2.0",
    "vue-events": "^3.1.0",
    "vue-multiselect": "^2.1.3",
    "vue-sweetalert2": "^1.6.3",
    "vuetable-2": "^2.0.0-beta.4",
    "vuex": "^3.0.1"
  }
}

我的webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version()
    .sourceMaps();

我尝试再次删除 node_modules 和 npm install 但这并不能解决问题。

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

使用 yarn install 而不是 npm 执行相同的过程并不能解决问题。

尝试使用此选项安装但没有成功:npm install node-sass --no-bin-links

• npm v6.4.1
• Node v11.5.0
• yarn v1.12.3

这个问题在旧版本的 Webpack 和 Mix 上不会发生。例如，以下软件包可以工作，但显然失去了一些较新的功能:

"laravel-mix": "^3",
"webpack": "^3.11.0",
"webpack-cli": "^3.1.2"

Answer 1

ReactJS 使用node-sass，运行下面的命令。

npm install node-sass --save