Vue “sass-loader” 版本问题导致编译错误

在使用Vue2开发项目时，安装项目依赖经常会碰到各种杂七八的异常情况发生。今天说一下“Sass- loader”版本依赖问题。

项目开发前期需要花大量时间构建我们的项目，其中安装项目依赖就是其中比较重要的一个环节。通过官网推荐的cil方式快速的构建项目框架，剩下就是需要安装我们所需要的依赖包，Vue2构建项目在初始化时需要安装sass-loader、sass等依赖。在清楚依赖版本问题可能就是踩坑。

因为历史原因的问题Vue2上的loader就存在版本依赖匹配的问题，一般我们直接默认这两种方式安装。

 npm install -D sass-loder
 或者
 yarn add sass-loder

安装成功后执行命令

npm run serve
或 
npm run start

发现会报异常，这个时候要注意了可能是安装的loader版本不匹配导致的。

Failed to compile with 1 error  

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependDate'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

首先我们要先检查一下package.json文件中Sass-loader版本是否高于^8.0.0版本，因为Sass-loader在8.0版本做了更新也有人说是Vue2.6版本不兼容高版本loader。所有就需要我们降低Sass-loader版本就可以解决这个异常报错。

具体版本可以去npm 里查一下输入插件名搜索一下：

npm-https://www.npmjs.com/

loader版本发生变化记得重新安装一遍依赖

卸载已经安装过的loader命令

npm uninstall sass-loader
或者
yarn remove sass-loader

在执行安装命令

npm install sass-loader@7.x.x (自己可以指定版本)
或者
yarn add sass-loader@7.x.x(自己可以指定版本)

还有可能会出现 TypeError: this.getOptions is not a function异常，这种可能需要单独处理一下loader解析。

module有两种rules方式都可以使用。

  configureWebpack: {
    module: {
    //   rules: [
    //     {
    //       test: /\.scss$/,
    //       use: [
    //         'style-loader',
    //         'css-loader',
    //         'sass-loader'
    //       ]
    //     }
    //   ],

      rules: [
        {
          test: /\.s[a|c]ss$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                // 如果有额外数据要注入到每个Sass文件中
                additionalData: '$someVar: value;',
                // 其他可选配置如sourceMap、webpackImporter等
              },
            },
          ],
        },
      ],
    }
  }