关于sass-loader、node-sass报错

Dignity_呱
5,553 阅读2分钟

前言

  • 打算安装scss开开心心玩转css


四个方面

1. 安装scss

  • npm install node-sass --save-dev //安装node-sass 
npm install sass-loader --save-dev //安装sass-loader 
npm install style-loader --save-dev 
//安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！

2. 配置文件

  • 在webpack.base.conf.js 文件下的配置 rules

  • rules: [
  ...{  //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别scss!    
    test: /\.scss?$/,
    loaders: ["style", "css", "sass"
    ]
  }
]


3. sass-loader报错

  • 安装配置成功，欣喜万分执行npm run dev，就可以在vue模板组件中引用lang="scss"，结果给我来一个报错
  • Module not found: Error: Can't resolve 'sass-loader' Module build failed: TypeError: this.getReso 


  • 在网上看了许多，基本上都是这样告诉你的，然而以下方法根本不起任何作用


  • 后来看到一个良心评论

  • npm install sass-resources-loader --save-dev

  • 然后 npm run dev 就不报错了


  • 第二次有同样遇见了这个问题，按上面的操作没有成功???


  • 这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本
    解决办法

  • npm uninstall sass-loader   //卸载当前版本）
npm install sass-loader@7.3.1 --save-dev  //卸了重新安装了一个低版本


4. node-sass报错

报错信息如下：node-sass@4.9.4 npm ERR! code ELIFECYCLE errno 1  解决方法：npm install node-sass@4.9.4 --ignore-scripts或者可能会遇到另外一个错误：淘宝镜像node-sass无法安装先上结论：使用淘宝的npm镜像来安装，也是没有安装上node-sass创建失败。 解决方案npm install sass-loader node-sass webpack --save-dev 或者 cnpm install sass-loader node-sass webpack --save-dev

最后总结

因为安装node-sass、sass-loader要换做淘宝镜像npm下载
（npm install -g cnpm --registry=https://registry.npm.taobao.org），
因为使用国外其他镜像，下载很慢，所以会下载失败，如果淘宝源下载还是失败，就npm下载，不行就cnpm，再不行就yam



参考

Module not found: Error: Can't resolve 'sass-loader' Module build failed: TypeError: this.getReso ：blog.csdn.net/moon_tang/a…

node-sass@4.9.4 npm ERR! code ELIFECYCLE errno 1 ：www.jianshu.com/p/c5001b0de…

淘宝镜像node-sass无法安装的完美解决 ：www.jianshu.com/p/33e63e03a…

资料

淘宝 NPM 镜像：developer.aliyun.com/mirror/NPM?…



avatar
文章
阅读
粉丝