如何让Scss编译后的CSS文件中全局样式处于顶部位置

我在SCSS文件中编写了如下代码：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    font-family: 'Montserrat','Poppins', sans-serif;
    font-size: 1rem;
  }

  .header_area {
    .main_nav {
      .site_logo {
         font-size: 2rem;
      }
    }
  }

编译后得到的CSS文件中，全局样式（*选择器、body选择器）却出现在了嵌套样式之后：

.header_area .main_nav .site_logo {
     font-size: 2rem;
  }

  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
         font-family: "Montserrat", "Poppins", sans-serif;
   }/*# sourceMappingURL=app.css.map */

希望全局样式能位于编译后的CSS文件顶部。

解决方案 #

1. 确认SCSS代码的编写顺序

首先检查你的SCSS文件，确保全局样式（*、body规则）确实写在所有其他嵌套样式之前。如果是通过@import导入全局样式文件（如重置样式），要保证@import语句位于所有其他样式或导入语句的最前面：

正确的导入顺序：

// 先导入全局样式文件
@import '_reset.scss';

// 再导入其他模块样式
@import '_header.scss';

错误的导入顺序会导致全局样式被插入到嵌套样式之后，这是SCSS@import的基础特性——它会将导入文件的内容插入到@import语句所在的位置。

2. 禁用编译/压缩工具的选择器排序功能

很多CSS压缩工具（如cssnano、clean-css）默认会按选择器权重排序规则调整CSS代码顺序，可能会把类选择器（如.header_area）放到全局选择器（*、body）前面。需要在工具配置中禁用这个功能：

• Webpack + css-minimizer-webpack-plugin：
  修改webpack配置，在css-minimizer的预设中关闭cssDeclarationSorter：

  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  
  module.exports = {
    optimization: {
      minimizer: [
        new CssMinimizerPlugin({
          minimizerOptions: {
            preset: [
              'default',
              {
                cssDeclarationSorter: false,
              },
            ],
          },
        }),
      ],
    },
  };
  

• Gulp + gulp-clean-css：
  在clean-css的配置中设置sortSelectors: false：

  const cleanCSS = require('gulp-clean-css');
  
  gulp.task('css', function() {
    return gulp.src('src/scss/**/*.scss')
      .pipe(sass())
      .pipe(cleanCSS({ level: { 1: { sortSelectors: false } } }))
      .pipe(gulp.dest('dist/css'));
  });
  

3. 升级SCSS编译器

如果你使用的是旧版本的SCSS编译器（如已废弃的Node Sass），可能存在编译顺序的bug。建议升级到最新版本的Dart Sass（目前官方推荐的SCSS编译器），它会严格按照SCSS文件中的代码顺序输出CSS。

内容的提问来源于stack exchange，提问作者MD IMRUL KAYES