如何不使用@import通过SCSS为html、body元素设置全局样式

Sass官方从Dart Sass 1.23.0版本开始主推@use/@forward规则替代即将废弃的@import，完全兼容原有样式输出能力，同时解决了@import存在的命名冲突、重复加载等问题，你可以按照以下场景选择实现方案：

场景1：单入口SCSS文件直接编写 #

如果你的项目不需要拆分样式文件，只有一个主SCSS入口（如index.scss），直接在入口文件中定义html、body等根元素规则即可，不需要引入任何其他文件，编译后会直接生效：

// 入口index.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  color: #222;
  background-color: #fafafa;
  min-height: 100vh;
}

场景2：拆分独立全局样式文件，用@use引入 #

如果你把全局根样式拆到了独立文件（如styles/global.scss），只需要在入口SCSS文件中用@use引入该文件即可，效果和之前用@import完全一致，引入的普通样式规则会按顺序直接输出到最终CSS中，不会产生额外包裹：

// styles/global.scss 独立全局样式文件
html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
}

// 入口index.scss
@use './styles/global';

// 其他业务样式
.card {
  padding: 1rem;
  border-radius: 8px;
}

场景3：前端框架项目配置 #

Vue/React/Angular等框架项目中，不需要在每个组件中单独引入全局样式：

1. 全局根样式直接在项目入口文件（如main.js/main.ts）中引入即可：import '@/styles/global.scss'
2. 如果是需要全局共享的变量、mixin，可以在构建工具配置中预加载，以Vite为例：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 全局注入变量/mixin，不需要每个组件单独引入
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
})

注意不要把全局根样式放在additionalData中注入，会导致每个组件编译时重复插入相同的全局规则

注意事项 #

• @use引入文件默认会给内部的变量、mixin添加命名空间，如果不需要命名空间可以写成@use './global' as *;
• 同一份样式文件多次@use也不会重复输出样式，Sass会自动去重
• 如果需要把拆分文件中的变量、mixin对外暴露给其他文件使用，可以用@forward在公共入口中转导出

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