main.ts引入style.scss与css.preprocessorOptions的区别解析

场景回顾 #

• 定义style.scss文件：

  $color: red;
  

• 在main.ts中导入该文件：

  import './style.scss';
  

• 此时在Vue组件的<style lang="scss">中使用$color变量，会触发报错：

  [plugin:vite:css] [sass] Undefined variable.
    ╷
  3 │   color: $color;
    │          ^^^^^^
    ╵
    src/components/HelloWorld.vue 3:10  root stylesheet
  

• 配置css.preprocessorOptions.scss.additionalData后，错误消失。

核心区别 #

1. 作用逻辑与范围

• import './style.scss'：这是JavaScript模块的导入行为，仅会将该SCSS文件编译后的CSS代码注入到全局样式中。但SCSS的变量、混合宏等预处理器特性不会在其他SCSS编译上下文（比如组件的<style lang="scss">）中共享——因为每个SCSS文件都是独立编译的，导入操作只是完成了CSS的加载，并未让预处理器层面的变量全局可见。
• css.preprocessorOptions.scss.additionalData：这是Vite为SCSS预处理器提供的全局编译配置，会在每个SCSS文件（包括组件内的样式块）编译前，自动注入指定的SCSS代码。所有SCSS编译过程都能直接访问这些预处理器变量，无需手动导入。

2. 处理层面不同

• import './style.scss'：作用于JS资源加载层面，最终输出的是编译后的CSS，和SCSS预处理器的变量共享机制无关。
• css.preprocessorOptions：作用于SCSS预处理器的编译阶段，是从预处理器层面实现变量、工具类的全局共享，属于编译配置。

3. 适用场景

• 若仅需让某个SCSS中的样式规则全局生效，使用import './style.scss'即可。
• 若需要在多个SCSS文件或组件样式中共享SCSS变量、混合宏、函数等预处理器特性，必须使用css.preprocessorOptions.scss.additionalData（或在每个需要的文件中手动导入变量文件）。

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