Vue3中编写SCSS编译脚本及解决normalize-scss编译错误

问题背景 #

• 项目中src/assets/styles/index.scss统一导入了同级文件夹下的所有SCSS文件
• 现有编译脚本：

  "scripts": {
    ...
    "compile": "node-sass --watch src/assets/styles/ -o src/assets/css"
  }
  

• 引入normalize-scss时（代码如下）出现编译错误：

  @import 'node_modules/normalize-scss/sass/normalize'; 
  @include normalize();
  

  错误信息指向_vertical-rhythm.scss的math.div($value, $base-font-size)语法，提示无效CSS，删除这两行代码后编译恢复正常。

可行解决方案 #

1. 替换node-sass为dart-sass（推荐）

node-sass已停止维护，不支持Sass 1.33+新增的math.div语法，而新版normalize-scss依赖该语法。操作步骤：

• 卸载node-sass：

  npm uninstall node-sass
  

• 安装官方推荐的dart-sass：

  npm install sass --save-dev
  

• 修改编译脚本（dart-sass的路径写法更简洁）：

  "scripts": {
    ...
    "compile": "sass --watch src/assets/styles/ src/assets/styles/css"
  }
  

2. 降级normalize-scss到兼容版本

如果不想替换编译器，可选择不使用math.div的旧版本normalize-scss，比如8.0.0版本：

• 卸载当前版本：

  npm uninstall normalize-scss
  

• 安装指定兼容版本：

  npm install normalize-scss@8.0.0 --save-dev
  

3. 临时忽略该文件（不推荐）

仅作为临时应急方案，会丢失normalize的样式：

• 注释掉index.scss中对normalize-scss的导入代码；
• 或单独编译排除normalize相关文件的SCSS模块，但node-sass无直接排除参数，需手动调整导入逻辑。

内容的提问来源于stack exchange，提问作者Дмитрий Андреевич