如何在保留原有嵌套结构的前提下编译SCSS代码

方案1：PostCSS插件组合（最简便，适配绝大多数场景） #

这个方案通过PostCSS配套的SCSS语法相关插件，仅处理变量、混入、导入等SCSS预处理器指令，完全保留原有嵌套结构，刚好符合你的输出要求。

• 首先安装依赖：
  npm install postcss postcss-scss postcss-import postcss-simple-vars postcss-mixins
• 新增PostCSS配置文件：

// postcss.config.js
module.exports = {
  // 调用SCSS解析器处理输入文件
  parser: 'postcss-scss',
  plugins: [
    // 处理@import导入逻辑
    require('postcss-import'),
    // 处理@mixin定义和@include引入逻辑
    require('postcss-mixins'),
    // 处理$变量替换逻辑
    require('postcss-simple-vars')
  ]
}

• 执行编译命令：
  postcss main.scss -o output.css
  编译后的输出和你给出的预期结果完全一致。

方案2：自定义SCSS AST遍历（可控性最高，适合插件开发） #

如果你需要支持更复杂的SCSS语法（比如运算、条件判断、循环等），可以用gonzales-pe这个SCSS语法解析器，自行遍历AST节点处理变量替换、混入展开、导入合并的逻辑，全程保留嵌套节点的结构，不需要改动原有嵌套层级，更适配你开发SCSS转HTML插件的定制化需求。

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