如何将SCSS文件中匹配@use的行移至顶部并实现去重、字母排序？

需求说明 #

将SCSS文件中所有包含@use的代码行统一移动到文件顶部，同时满足两个额外要求：

• 自动去除重复的导入语句
• 所有导入语句按字母顺序排序

输入输出示例 #

输入代码 #

.css-class {
  @use 'text-size' as *; // 如何将所有以@use开头的行移动到文件顶部（最好同时按字母排序并去重）
  @include text-size(lg);
  font-weight: 500;
  margin: 0;
  text-align: left;
}

.another-css-class {
  @use 'text-size' as *;
  @include text-size(md);
  font-weight: normal;
  margin: 0;
  text-align: left;
  @use 'text-color' as *;
  @include text-color(dark);
}

.yet-another-css-class {
  @use 'background-color' as *;
  @include background-color(teal, 20);
  padding: 16px;
  text-align: center;
}

期望输出代码 #

@use 'background-color' as *;
@use 'text-color' as *;
@use 'text-size' as *; 


.css-class {
  @include text-size(lg);
  font-weight: 500;
  margin: 0;
  text-align: left;
}

.another-css-class {
  @include text-size(md);
  font-weight: normal;
  margin: 0;
  text-align: left;
  @include text-color(dark);
}

.yet-another-css-class {
  @include new--background-color(teal, 20);
  padding: 16px;
  text-align: center;
}

现有代码改造方案（Node.js） #

调整原有逻辑，先收集所有需要的@use语句，去重排序后统一放到文件顶部，同时删除原代码中内嵌的@use语句即可，改造后代码如下：

const fs = require('fs');

const replaceFile = (file) => {
  const originalText = fs.readFileSync(file, 'utf-8');
  const lines = originalText.toString().split("\n");
  const useStatements = new Set(); // 用Set自动去重
  const processedLines = [];

  lines.forEach(line => {
    // 先处理已存在的@use语句
    const useMatch = /^\s*(@use\s+['"].+['"]\s+as\s+\*;)/.exec(line);
    if (useMatch) {
      useStatements.add(useMatch[1].trim());
      return; // 原行跳过不加入处理后的行，避免保留内嵌的@use
    }
    // 再处理@include提取对应的@use
    const includeMatch = /.*@include\s([a-zA-Z'-]+)[\s(;]/.exec(line);
    if (includeMatch) {
      const [, mixin] = includeMatch;
      useStatements.add(`@use '${mixin}' as *;`);
    }
    processedLines.push(line);
  });

  // 对@use语句按字母顺序排序
  const sortedUseStatements = Array.from(useStatements).sort((a, b) => a.localeCompare(b));
  // 拼接最终内容：排序后的@use + 两个空行 + 处理后的其他代码
  const finalContent = [...sortedUseStatements, '', '', ...processedLines].join("\n");
  fs.writeFileSync(file, finalContent);
};

const replaceInFolder = (path) => {
  const content = fs.readdirSync(path);
  content.forEach((fileOrFolder) => {
    const fullPath = `${path}/${fileOrFolder}`;
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) {
      replaceInFolder(fullPath);
    } else if (fileOrFolder.endsWith(".scss")) {
      replaceFile(fullPath);
    }
  });
};

replaceInFolder("src/app")

无代码解决方案 #

如果不想用Node.js脚本，可直接用编辑器手动处理，以VSCode为例：

1. 打开目标SCSS文件，按Ctrl+F打开查找面板，开启正则匹配模式，输入查找规则：^\s*@use.*;
2. 点击「查找全部」，复制所有匹配到的@use语句
3. 点击「替换全部」，把所有匹配到的@use语句从原文件中删除
4. 将复制的@use语句粘贴到文件顶部，选中所有粘贴的行，右键选择「按字母顺序升序排序行」
5. 手动删除重复行即可

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