uni-app [plugin:uni:pre-css] Unbalanced delimiter found in string

在处理 uni-app 开发中遇到的 [plugin:uni:pre-css] Unbalanced delimiter found in string 错误时，通常是因为 CSS 或预处理器（如 SCSS、LESS 等）代码中存在语法错误，尤其是字符串中的分隔符不匹配。这类错误常见于字符串未正确闭合或转义。

以下是一些可能引发此错误的常见场景及其修正代码示例：

场景 1: 字符串未闭合

错误代码示例：

.example {
  content: "This is a string with unbalanced quotes;
}

修正代码：

.example {
  content: "This is a string with balanced quotes;";
}

场景 2: 字符串中的特殊字符未转义

错误代码示例（假设使用 SCSS）：

.example {
  content: "This is a string with an unbalanced backslash: \";
}

修正代码：

.example {
  content: "This is a string with an escaped backslash: \\";
}

场景 3: 嵌套字符串时分隔符冲突

错误代码示例（在 SCSS 中嵌套字符串）：

$base-string: "base";
.example {
  content: "#{$base-string} string with unbalanced quotes";
}

注意：虽然此例本身不直接引发分隔符不平衡，但展示了如何正确嵌套字符串。如果字符串内再包含引号，需确保它们被正确转义或替换。

修正代码（假设需要在字符串内再嵌套引号）：

$base-string: "base";
.example {
  content: "#{$base-string}\" string with balanced quotes";
}

场景 4: 使用 CSS 变量时字符串分隔符错误

错误代码示例：

:root {
  --main-color: "red";
}
.example {
  color: var(--main-color);
}

注意：CSS 自定义属性（变量）的值通常不应被引号包围，除非它们本身是字符串值的一部分。

修正代码：

:root {
  --main-color: red;
}
.example {
  color: var(--main-color);
}

总结

确保所有字符串在 CSS 或预处理器代码中正确闭合，并对特殊字符进行适当的转义。此外，检查任何嵌套字符串或变量的使用是否遵循了正确的语法规则。通过仔细审查代码中的字符串定义和使用，可以有效避免 [plugin:uni:pre-css] Unbalanced delimiter found in string 这类错误。