如何使用 webpack 仅使用多个变量文件中的一个变量文件？

Question

我想为多个主题构建我的项目。以下变量是这些主题中唯一的变化。所以我使用这些变量创建了多个文件并分配了不同的值。

// colors
$primary-color: #306A48;
$dark-blue-1: #0f212f;
$dark-blue-2: #fff;
$dark-blue-3: #314252;
$dark-blue-4: #485661;
$gray-1: #72828f;
$gray-2: #97a5b1;
$gray-3: #afc0d0;
$gray-4: #afc0d0;
$yellow: #F2C94C;
$red-1: #EB5757;
$green-2: #27AE60;
$green-3: #6FCF97;
$red: #EB5757;

// media points
$breakpoint-xxl: 1400px;
$breakpoint-xl: 1200px;
$breakpoint-lg: 992px;
$breakpoint-md: 768px;
$breakpoint-sm: 576px;
$breakpoint-min: 360px;

我尝试做的方法是创建几个构建脚本，并且每个脚本应该运行不同的 webpack 规则。为此，我应该只导入相关的变量文件。我该怎么办？？？？

Answer 1

您可以创建多个 webpack 配置文件，并为每个构建使用不同的文件运行构建脚本。

然后在 webpack 配置中指定自定义解析器

module.exports = {
  ...
  resolve: {
    alias: {
      pathBeingImported: actualPathToASpecificFile,
    },
  },
}

由于它是一个 javascript 文件，因此您可以根据进程环境更改别名中的值，并且可能不必定义多个文件。

Answer 2

为了解决这个问题，我发现了一个替代解决方案。我利用 Webpack 创建一个变量，然后使用 sass-loader 将其传递到 SCSS 文件。

这是我配置 Webpack 的方式：

use: [
    MiniCssExtractPlugin.loader,
    {
        loader: 'css-loader',
        options: {
            importLoaders: 1,
            modules: {
                mode: 'icss',
            },
        },
    },
    {
        loader: 'sass-loader',
        options: {
            additionalData: '$theme: ' + 'dark' + ';'
        }
    }
]

然后，我在 SCSS 文件中使用这个变量来切换主题：

@if $theme == 'light' {
    // Define button colors for light theme
    $btn-color-primary: $secondary-3;

    // Define background colors for light theme
    $bg-color-primary: $primary-5;
}

@if $theme == 'dark' {
    // Define button colors for dark theme
    $btn-color-primary: $secondary-1;

    // Define background colors for dark theme
    $bg-color-primary: $primary-3;
}

此设置允许我们仅在构建过程中更改主题。