集成vue-laravel-file-manager后scss报math.div语法错误怎么解决？

报错根因 #

该错误是Sass版本语法不兼容导致：math.div() 是Dart Sass 1.33.0版本才新增的内置模块语法，你项目当前使用的低版本Sass（或旧版Node Sass）无法识别该语法，报错代码来自vue-laravel-file-manager依赖的plyr播放器的SCSS文件。

解决方案（任选一种即可） #

方案1：全局注入Sass math模块 #

不需要修改依赖版本，直接在项目的Sass配置中全局注入math模块，让所有SCSS文件都能识别math.div语法：

• 如果是Vue CLI搭建的项目，修改vue.config.js配置：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // sass-loader v8及以下版本将参数名替换为 prependData
        additionalData: `@use "sass:math";`
      }
    }
  }
}

• 如果是原生Webpack项目，在sass-loader的options配置中添加对应参数即可。
  修改配置后重新执行yarn run serve启动项目。

方案2：降级plyr到兼容低版本Sass的版本 #

强制安装未使用math.div语法的低版本plyr：

yarn add plyr@3.6.12

安装完成后重新编译即可。

方案3：升级项目Sass版本 #

把项目依赖的旧版Node Sass替换为支持新语法的高版本Dart Sass，同时适配对应版本的sass-loader：

# 卸载旧版node-sass
yarn remove node-sass
# 安装兼容版本的sass和sass-loader，webpack4环境下sass-loader最高适配10.x版本
yarn add sass@^1.33.0 sass-loader@^10.1.1 -D

升级完成后重新启动项目即可。

内容的提问来源于stack exchange，提问作者user17384367