Sass编译报错：Undefined variable，全局变量复用问题求助

核心问题 #

你用了CSS原生的@import url()语法导入Sass文件，这会导致Sass把这些文件当成普通CSS资源处理，完全跳过变量、mixin等预处理器语法的解析——所以styles.scss里的普通CSS能生效，但变量$mint和mixin根本没被注入到组件的Sass作用域里，自然会报“未定义”错误。

直接修复：改用Sass原生导入语法 #

把所有@import里的url()去掉，用Sass专属的导入方式：

修正后的styles.scss

@import './variables.scss';
@import './layout.scss';
@import './mixin.scss';

修正后的component.scss

@import './styles.scss';

.card {
  background: $mint;
}

Sass的@import（不带url()）会先解析导入的Sass文件，把变量、mixin等预处理器内容注入当前文件的作用域，之后再编译成CSS，这样组件里就能正常访问$mint了。

更优方案：全局自动注入（无需手动导入） #

如果不想在每个组件里都手动导入styles.scss，可以通过构建工具（比如Vite、Webpack）配置全局预注入，让变量和mixin自动出现在所有Sass文件的作用域里：

以Vite为例（vite.config.js）

export default {
  css: {
    preprocessorOptions: {
      scss: {
        // 自动在每个Sass文件开头导入变量和mixin
        additionalData: `@import "./src/assets/styles/variables.scss"; @import "./src/assets/styles/mixin.scss";`
      }
    }
  }
}

以Webpack为例（webpack.config.js）

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `@import "./src/assets/styles/variables.scss"; @import "./src/assets/styles/mixin.scss";`
            }
          }
        ]
      }
    ]
  }
}

配置后，你甚至不需要在组件里导入任何全局样式文件，直接用$mint或mixin即可。

对你疑问的解答 #

不是必须在每个组件中单独导入变量和mixin——只要用对Sass的原生导入语法，或者通过构建工具全局注入，就能实现统一管理，避免重复导入。

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