vue中node-sass安装错误解决方案

说明

webpack使用sass-loader处理sass、scss文件，将其编译成css文件，其中sass-loader默认使用node-sass进行处理，而node-sass容易引发很多编译或发布的问题，头疼10000遍。

解决方案

没有采用替换淘宝镜像解决，而是直接使用dart-sass替代node-sass

如何解决

1. 卸载node-sass，眼不见心不烦

2. 安装sass

   npm install sass
   
   

3. 修改vue.config.js文件

   • 先去了解啥是vue.config.js

   • 再去了解sass-loader

   • 最后添加css配置

     css: {
         loaderOptions:{
             sass : {
                 loader: 'sass-loader',
                 options: {
                     // Prefer `dart-sass`
                     implementation: require('sass'),
                 }
             }
         }
     },
     
     

   • 注意：我使用了style-resources-loader，于是会有pluginOptions配置，最好将css配置放在pluginOptions前