Vue项目执行npm run serve时style.sass出现语法错误求助

可能原因及解决办法 #

• 更换sass依赖
  node-sass已停止维护，对部分CSS多值属性的解析存在兼容性问题。直接替换为dart-sass：

  npm uninstall node-sass
  npm install sass --save-dev
  

• 拆分CSS属性写法
  将逗号分隔的多值will-change拆分为两行，规避预处理器的解析问题：

  will-change: transform;
  will-change: opacity;
  

• 更新相关构建依赖
  旧版本的vue-loader或css-loader可能无法正确识别该CSS语法，执行更新命令：

  npm update vue-loader css-loader
  

• 检查代码位置是否错误
  确认该CSS代码是否误写在了<script>标签内，需将其移至<style>标签中。

• 清理构建缓存
  缓存残留可能导致旧解析逻辑生效，执行清理后重启服务：

  rm -rf node_modules/.cache
  npm run serve
  

• 调整ESLint配置
  若ESLint误判样式代码为JS语法错误，可在.eslintrc.js中添加规则忽略：

  module.exports = {
    overrides: [
      {
        files: ['*.vue'],
        rules: {
          'no-undef': 'off',
          'no-unused-vars': 'off'
        }
      }
    ]
  }
  

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