通过JS导入SCSS文件时如何正确使用Sass变量？

问题根源 #

Webpack会把每个通过import引入的SCSS文件当作独立的编译单元处理。你在JS里同时导入了styles.scss和index.scss，这两个文件是分开编译的：

• _base.scss能正常用变量，是因为它被styles.scss导入，共享了styles.scss里的变量环境
• index.scss是单独编译的，没有导入_variables.scss，所以变量未定义

可行解决方案 #

方案1：在页面SCSS文件中手动导入变量

直接在index.scss开头添加变量文件的导入，确保路径正确：

// index.scss
@import './assets/styles/variables';

// 后续你的样式代码
.your-class {
  color: $primary-color;
}

这种方式直观，适合小型项目或需要按需导入变量的场景。

方案2：配置Webpack自动注入变量

通过sass-loader的additionalData选项，自动将变量文件注入到所有SCSS文件中，无需手动导入。修改Webpack配置文件：

const path = require('path');

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader', // 生产环境可替换为mini-css-extract-plugin
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 用绝对路径避免路径解析错误
              additionalData: `@import "${path.resolve(__dirname, 'assets/styles/_variables.scss')}";`
            }
          }
        ]
      }
    ]
  }
};

配置后，所有SCSS文件都会自动包含变量定义，适合中大型项目统一管理变量。

方案3：将页面SCSS合并到主样式文件中

不在JS里单独导入index.scss，而是把它导入到styles.scss末尾，让它共享主文件的变量环境：

// styles.scss
@import 'reset';
@import 'variables';
@import 'fonts';
@import 'icons';
@import 'base';
@import '../../index.scss'; // 路径需匹配项目结构

然后JS里只保留主样式文件的导入：

import './assets/styles/styles.scss';
// 移除import './index.scss'

这种方式适合把页面样式和全局样式合并编译的场景。

关于JS导入样式的合理性 #

你通过JS导入样式的方式是完全合理的，这是Webpack处理样式文件的标准流程：开发环境下样式会被打包到JS bundle中，生产环境可通过插件提取为独立的CSS文件。问题的核心是多SCSS文件的编译隔离，而非导入方式本身。

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