css-loader,sass-loader等编译失败的原因

一般出现下面的情况，是样式解析失败导致。样式解析失败是因为，依赖没装好或没装

ERROR in ./node_modules/[email protected]@css-loader?{"minimize":false,"sourceMap":true,"alias":{"../img":"../static/img"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/App.vue
Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (67)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.9.0
    at module.exports (/Users/jinlong_zhang/F4/beta-front/node_modules/node-sass/lib/binding.js:13:13)
    at Object. (/Users/jinlong_zhang/F4/beta-front/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:738:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object. (/Users/jinlong_zhang/F4/beta-front/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (internal/modules/cjs/loader.js:738:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Module.require (internal/modules/cjs/loader.js:667:17)
 @ ./node_modules/vue-style-loader!./node_modules/[email protected]@css-loader?{"minimize":false,"sourceMap":true,"alias":{"../img":"../static/img"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/App.vue 4:14-432 13:3-17:5 14:22-440
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js
复制代码

解决办法： 看你使用的CSS语言是什么,是 常规的 或者 less 或者 sass

常规： 执行 npm install stylus-loader css-loader style-loader --save-dev
复制代码

less：执行 npm install less less-loader --save-dev
复制代码

sass：执行 npm install sass sass-loader --save-dev 或者（$npm intall sass-loader --save ; $npm install node-sass --save）
复制代码

删除node_module: rm -rf node_module
重新安装： cnpm i
复制代码

如果单独安装上面的某一步，还没解决问题，建议你都安装一下

完美！

转载于:https://juejin.im/post/5c888dbbe51d45346459990a