Nuxt项目使用SASS @use规则报错及后续bootstrap兼容问题咨询

你最初使用的node-sass是基于已停止维护的LibSass内核，不支持Sass官方的模块系统（包含@use、命名空间调用mixin/function等能力），只有Dart Sass（即npm包名为sass的官方实现）支持这类新特性，因此安装sass包后该问题得到解决。

该报错是因为Bootstrap 4的Sass源码使用了新版Dart Sass已弃用的/运算符作为除法语法，与新Sass版本不兼容，按以下步骤修复即可：

1. 先卸载会产生冲突的node-sass依赖，避免sass-loader优先调用旧Sass实现：

yarn remove node-sass

2. 从以下两种兼容方案中选择一种即可：

• 方案一：降级sass到兼容Bootstrap 4的版本
  Dart Sass v1.32.13是最后一个默认不校验/除法弃用语法的版本，直接安装对应版本即可：

yarn add -D sass@1.32.13

• 方案二：保留新版sass，添加Nuxt配置屏蔽弃用警告
  如果需要使用新版sass的特性，可在nuxt.config.js中添加配置，屏蔽依赖的弃用警告：

// nuxt.config.js
export default {
  build: {
    loaders: {
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}

3. 额外修复点：你编写的grid.scss中调用了math.percentage方法，但没有导入sass:math模块，需要在文件头部补全导入声明，否则运行时会抛出方法未定义的错误：

// grid.scss 头部添加该导入语句
@use 'sass:math';

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