vue安装scss报错

安装node-sass报错

今天想在vue中用一下Scss，但是安装过程中一直报错，主要是卡在node-sass上，最开始提示未找到python，安装完python后还是一直报错，经历一上午折磨，终于看到有人说是因为版本问题导致的报错。

解决思路：认准对应的node版本号安装sass， 如果是node16就要安装sass6.0以上

以下是 Node-sass 支持的最低和最高版本的快速指南：

但是，安装还是失败！！！

后来终于一位博主的评论区有人评论说不用node16以上不用安装node-sass了，直接安装scss和sass-loader就行，抱着试一试的想法直接安装完，又报错了..........

运行sass-loader报错

报错提示：

options has an unknown property 'prependData'. These properties are valid: object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

解决思路：这个也是因为scss-loader导致的，根据项目的根路径的vue.config.js中

css: {
    loaderOptions: {
      scss: {
        prependData: `@import"@/assets/scss/_variable.scss";`,
      },
    },
  },

查看了一下我安装的sass-loade版本是“13.3.2”版本，由于sass-loader版本不同，loaderOptions中prependData的键名也要修改成additionalData

sass-loader v8-, 键名是“data"
sass-loader v10-, 键名是“prependData"
sass-loader v10+, 键名是“additionalData"

改完后再次运行，终于成功了，一天的时间就耗在装这玩意儿上面了，EMM......