如何在 SCSS 使用 JavaScript 变量/scss全局变量

在 SCSS 中使用 JavaScript 变量有多种方法，下面介绍其中两种常用的方法：

1. 使用 `:export` 导出 JavaScript 变量作为 SCSS 变量

在 JavaScript 文件中定义变量并使用 `:export` 导出，如：

// variables.js 文件
export const primaryColor = '#007bff';

在 SCSS 文件中引入 JavaScript 变量，并使用 `:import` 引入，如：

// style.scss 文件
:import "variables" as variables;

body {
  background-color: variables.primaryColor;
}

注意：这种方法需要使用支持 ES6 模块的浏览器或打包工具。

2. 使用 `sass-extract-loader` 将 JavaScript 变量作为全局变量

安装 `sass-extract-loader`，并在 webpack 配置文件中使用，如：

// webpack.config.js 文件
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-extract-loader',
            options: {
              plugins: ['sass-extract-js'],
            },
          },
          // ...
        ],
      },
      // ...
    ],
  },
};

在 JavaScript 文件中定义变量，并使用 `sass-extract-loader` 导出，如：

// variables.js 文件
module.exports = {
  primaryColor: '#007bff',
};

在 SCSS 文件中使用导出的全局变量，如：

// style.scss 文件
$primary-color: var(--primary-color);

body {
  background-color: $primary-color;
}

注意：这种方法需要使用 webpack 打包工具。