Sass 变量导出 undefined 问题记录

在 JS 中导入 Sass 变量得到 undefined？可能是 css-loader 版本惹的祸。

问题描述

在某次项目中需要从 Sass 文件导出变量到 JavaScript 使用，发现无论怎么导入都是 undefined，但样式能正常编译显示。

// variables.scss
$primary-color: #3498db;
$spacing-unit: 16px;

// 期望这样使用
import { primaryColor } from './variables.scss';
console.log(primaryColor);  // undefined ❌

解决方案

方案一：使用 `.module.scss` 后缀（推荐）

将 Sass 文件命名为 *.module.scss 结尾：

// variables.module.scss
$primary-color: #3498db;
$spacing-unit: 16px;

import variables from './variables.module.scss';
console.log(variables.primaryColor);  // ✅

方案二：配置 css-loader

在 webpack 配置中为 css-loader 添加 namedExport: false 选项：

{
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          namedExport: false,  // 关键配置
        },
      },
    },
    'sass-loader'
  ]
}

原因分析

这个问题主要出现在 css-loader 较新版本（v6+）中：

{
  "css-loader": "^6.7.1"  // 新版本默认开启 namedExport
}

新版本 css-loader 默认开启 namedExport: true，要求使用 ES Module 的命名导出方式，但 Sass 变量导出需要 namedExport: false 才能正确工作。

旧版本不受影响：

{
  "css-loader": "^3.5.3",
  "sass": "^1.52.1",
  "sass-loader": "^13.0.0",
  "style-loader": "^3.3.1",
  "webpack": "^5.72.1"
}

Vue CLI 特殊情况

Vue CLI ~5.0.0 可以正常配置 .module.scss 后缀，这得益于 vue-loader 和 vue-style-loader 的配合。

Vue CLI 5 内置的 css-loader 版本为 ^4.3.0，处于过渡版本，兼容性较好。

快速排查清单

现象	可能原因	解决方案
变量导出 undefined	css-loader v6+ 默认 namedExport	改用 `.module.scss` 后缀
样式正常但 JS 拿不到值	modules 配置问题	设置 `namedExport: false`
Vue CLI 项目正常	vue-loader 内置处理	无需额外配置

参考资源：